android - Flutter:为什么我会收到 "Vertical viewport was given unbounded height"错误？

Question

我是 flutter 的新手，下面是我的代码

import 'package:flutter/material.dart';

class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Choco Factory"),
      ),
      body: HomepageUI(),
    );
  }
}

class HomepageUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomepageUIState();
  }
}

class _HomepageUIState extends State<HomepageUI> {
  List<Map<String, String>> productsMap = [];

  _HomepageUIState() {
    productsMap
        .add({"title": "Cappuccino", "imageUrl": "assets/cappuccino.jpg"});
    productsMap.add(
        {"title": "Chocolate Cake", "imageUrl": "assets/chocolate_cake.jpg"});
    productsMap
        .add({"title": "Chocolates", "imageUrl": "assets/chocolates.jpg"});
    productsMap.add(
        {"title": "Hot Chocolate", "imageUrl": "assets/hot_chocolate.jpg"});
    productsMap.add({"title": "Naougat", "imageUrl": "assets/naugat.jpg"});
    productsMap.add(
        {"title": "White Chocolate", "imageUrl": "assets/white_chocolate.jpg"});
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Text("Select Your Choco!"),
        Expanded(
            child: Column(
          children: <Widget>[
            ListView.builder(
              itemBuilder: _listBuilder,
              itemCount: productsMap.length,
            )
          ],
        )
            //child: Image.asset("assets/chocolates.jpg"),
            )
      ],
    );
  }
}

Widget _listBuilder(BuildContext context, int index) {
  return Card(
    child: Column(
      children: <Widget>[Text("Item No: " + index.toString())],
    ),
  );
}

当我运行这段代码时，我只是得到以下错误

I/flutter (16372): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (16372): The following assertion was thrown during performResize():
I/flutter (16372): Vertical viewport was given unbounded height.
I/flutter (16372): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (16372): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (16372): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (16372): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (16372): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (16372): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (16372): the height of the viewport to the sum of the heights of its children.
I/flutter (16372): When the exception was thrown, this was the stack:
I/flutter (16372): #0      RenderViewport.performResize.<anonymous closure> 
I/flutter (16372): #1      RenderViewport.performResize 
I/flutter (16372): #2      RenderObject.layout 
I/flutter (16372): #3      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #4      RenderObject.layout 
I/flutter (16372): #5      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #6      RenderObject.layout 
I/flutter (16372): #7      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #8      RenderObject.layout 
I/flutter (16372): #9      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #10     RenderObject.layout 
I/flutter (16372): #11     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #12     RenderObject.layout 
I/flutter (16372): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #14     RenderObject.layout 
I/flutter (16372): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #16     RenderObject.layout 
I/flutter (16372): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #18     RenderObject.layout 
I/flutter (16372): #19     RenderFlex.performLayout 
I/flutter (16372): #20     RenderObject.layout 
I/flutter (16372): #21     RenderFlex.performLayout 
I/flutter (16372): #22     RenderObject.layout 
I/flutter (16372): #23     MultiChildLayoutDelegate.layoutChild 
I/flutter (16372): #24     _ScaffoldLayout.performLayout 
I/flutter (16372): #25     MultiChildLayoutDelegate._callPerformLayout 
I/flutter (16372): #26     RenderCustomMultiChildLayoutBox.performLayout 
I/flutter (16372): #27     RenderObject.layout 
I/flutter (16372): #28     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #29     RenderObject.layout 
I/flutter (16372): #30     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #31     _RenderCustomClip.performLayout 
I/flutter (16372): #32     RenderObject.layout 
I/flutter (16372): #33     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #34     RenderObject.layout 
I/flutter (16372): #35     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #36     RenderObject.layout 
I/flutter (16372): #37     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #38     RenderObject.layout 
I/flutter (16372): #39     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #40     RenderObject.layout 
I/flutter (16372): #41     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #42     RenderObject.layout 
I/flutter (16372): #43     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #44     RenderObject.layout 
I/flutter (16372): #45     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #46     RenderObject.layout 
I/flutter (16372): #47     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #48     RenderOffstage.performLayout 
I/flutter (16372): #49     RenderObject.layout 
I/flutter (16372): #50     RenderStack.performLayout 
I/flutter (16372): #51     RenderObject.layout 
I/flutter (16372): #52     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #53     RenderObject.layout 
I/flutter (16372): #54     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #55     RenderObject.layout 
I/flutter (16372): #56     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #57     RenderObject.layout 
I/flutter (16372): #58     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #59     RenderObject.layout 
I/flutter (16372): #60     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #61     RenderObject.layout 
I/flutter (16372): #62     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout 
I/flutter (16372): #63     RenderObject.layout 
I/flutter (16372): #64     RenderView.performLayout 
I/flutter (16372): #65     RenderObject._layoutWithoutResize 
I/flutter (16372): #66     PipelineOwner.flushLayout 
I/flutter (16372): #67     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame 
I/flutter (16372): #68     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame 
I/flutter (16372): #69     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback 
I/flutter (16372): #70     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback 
I/flutter (16372): #71     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame 
I/flutter (16372): #72     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> 
I/flutter (16372): #81     _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19)
I/flutter (16372): #82     _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5)
I/flutter (16372): #83     _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)
I/flutter (16372): (elided 8 frames from package dart:async)
I/flutter (16372): The following RenderObject was being processed when the exception was fired:
I/flutter (16372):   RenderViewport#eb3f7 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (16372):   creator: Viewport ← IgnorePointer-[GlobalKey#9a488] ← Semantics ← Listener ← _GestureSemantics ←
I/flutter (16372):   RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#8019d] ← _ScrollableScope ←
I/flutter (16372):   _ScrollSemantics-[GlobalKey#d1d50] ← RepaintBoundary ← CustomPaint ← RepaintBoundary ←
I/flutter (16372):   NotificationListener<ScrollNotification> ← ⋯
I/flutter (16372):   parentData: <none> (can use size)
I/flutter (16372):   constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=Infinity)
I/flutter (16372):   size: MISSING
I/flutter (16372):   axisDirection: down
I/flutter (16372):   crossAxisDirection: right
I/flutter (16372):   offset: ScrollPositionWithSingleContext#add24(offset: 0.0, range: null..null, viewport: null,
I/flutter (16372):   ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#84e81,
I/flutter (16372):   ScrollDirection.idle)
I/flutter (16372):   anchor: 0.0
I/flutter (16372): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (16372):   RenderSliverPadding#afc2e NEEDS-LAYOUT NEEDS-PAINT
I/flutter (16372):     RenderSliverList#3e588 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (16372): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderViewport#eb3f7 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderViewport#eb3f7 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#051d7 relayoutBoundary=up10 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#34c69 relayoutBoundary=up9 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#ab100 relayoutBoundary=up8 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#bd8ff relayoutBoundary=up7 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#65d6d relayoutBoundary=up6 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#d7b26 relayoutBoundary=up5 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#de37f relayoutBoundary=up4 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#eae89 relayoutBoundary=up3 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderFlex#54b51 relayoutBoundary=up2 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: RenderBox was not laid out: RenderFlex#6069a relayoutBoundary=up1 NEEDS-PAINT
I/flutter (16372): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.
W/InputMethodManager(16372): startInputInner : InputBindResult == null need restart
Lost connection to device.
Exited (sigterm)

这是为什么？

Answer 1

你不需要你做的任何Columns，ListView已经是一个列表。只需删除两列，你应该没问题:)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Choco Factory"),
      ),
      body: HomepageUI(),
    );
  }
}

class HomepageUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomepageUIState();
  }
}

class _HomepageUIState extends State<HomepageUI> {
  List<Map<String, String>> productsMap = <Map<String, String>>[
    {"title": "Cappuccino", "imageUrl": "assets/cappuccino.jpg"},
    {"title": "Chocolate Cake", "imageUrl": "assets/chocolate_cake.jpg"},
    {"title": "Chocolates", "imageUrl": "assets/chocolates.jpg"},
    {"title": "Hot Chocolate", "imageUrl": "assets/hot_chocolate.jpg"},
    {"title": "Naougat", "imageUrl": "assets/naugat.jpg"},
    {"title": "White Chocolate", "imageUrl": "assets/white_chocolate.jpg"}
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Text("Select Your Choco!"),
        Expanded(
          child: ListView.builder(
            itemBuilder: _listBuilder,
            itemCount: productsMap.length,
          )
          //child: Image.asset("assets/chocolates.jpg"),
        )
      ],
    );
  }

  Widget _listBuilder(BuildContext context, int index) {
    return Card(
      child: Column(
        children: <Widget>[
          Text(productsMap[index]['title']),
          Container(
            child: Image.asset(productsMap[index]['imageUrl'])
          )
        ],
      ),
    );
  }
}

编辑:实际上你需要第一个 Column，如果你想为每个项目添加 Column 和更多信息，那么 _listBuilder 中的 Column 也可以保留。只需删除 ListView.builder 上方的 Column

编辑:添加示例代码