Flutter ListView 在列内崩溃

Question

我需要一些帮助来弄清楚如何呈现 ListView。

我一直在关注 Flutter 教程，但我不得不停下来，因为我无法解决这个问题。

据我所知，ListView 试图占用无限量的空间，这显然会使应用程序崩溃。

我也开始理解你不能将 ListView 作为列/行的直接子级（我解释了我在下面尝试做的事情） https://flutter.io/docs/development/ui/布局/框约束#flex

这是代码：

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        margin: EdgeInsets.all(10),
        child: ProductControl(_addProduct),
      ),
      ListView.builder(
        itemCount: _products.length,
        itemBuilder: (BuildContext context, int index) => Card(
              child: Column(
                children: <Widget>[
                  Image.asset('assets/food.jpg'),
                  Text(_products[index])
                ],
              ),
            ),
      )
    ],
  );
}

这就是堆栈跟踪开头所说的：

flutter: ??? EXCEPTION CAUGHT BY RENDERING LIBRARY ??????????????????????????????????????????????????????????
flutter: The following assertion was thrown during performResize():
flutter: Vertical viewport was given unbounded height.
flutter: Viewports expand in the scrolling direction to fill their 
container.In this case, a vertical
flutter: viewport was given an unlimited amount of vertical space in 
which to expand. This situation
flutter: typically happens when a scrollable widget is nested inside 
another scrollable widget.
flutter: If this widget is always nested in a scrollable widget there 
is no need to use a viewport because
flutter: there will always be enough vertical space for the children. 
In this case, consider using a Column
flutter: instead. Otherwise, consider using the "shrinkWrap" property 
(or a ShrinkWrappingViewport) to size
flutter: the height of the viewport to the sum of the heights of its children.

这是从堆栈跟踪的底部获取的：

flutter: The following RenderObject was being processed when the 
exception was fired:
flutter:   RenderViewport#cab62 NEEDS-LAYOUT NEEDS-PAINT
flutter:   creator: Viewport ? _ScrollableScope ? IgnorePointer- 
[GlobalKey#b71f9] ? Semantics ? Listener ?
flutter:   _GestureSemantics ? RawGestureDetector- 
[LabeledGlobalKey<RawGestureDetectorState>#d0420] ?
flutter:   _ScrollSemantics-[GlobalKey#02b55] ? Scrollable ? 
PrimaryScrollController ? ListView ? Column ? ?
flutter:   parentData: <none> (can use size)
flutter:   constraints: BoxConstraints(0.0<=w<=375.0, 0.0<=h<=Infinity)
flutter:   size: MISSING
flutter:   axisDirection: down
flutter:   crossAxisDirection: right
flutter:   offset: ScrollPositionWithSingleContext#892dc(offset: 0.0, 
range: null..null, viewport: null,
flutter:   ScrollableState, AlwaysScrollableScrollPhysics -> 
BouncingScrollPhysics, IdleScrollActivity#9455f,
flutter:   ScrollDirection.idle)
flutter:   anchor: 0.0
flutter: This RenderObject had the following descendants (showing up to 
depth 5):
flutter:   RenderSliverPadding#c8ab3 NEEDS-LAYOUT NEEDS-PAINT
flutter:     RenderSliverList#66f1b NEEDS-LAYOUT NEEDS-PAINT

我试图将 ListView.builder 包装在一个 Expanded 小部件中，但这对我不起作用。（这就是教程中正在做的事情）

我试图将 Column 包装在 IntrinsicHeight 小部件中，但没有成功。

我设法解决此问题的唯一方法是将 ListView.builder 包装在具有设置高度属性的 Container 小部件中。但是必须使用具有设定高度的 Container 对我来说似乎不合适。

如果需要，我可以尝试发布完整代码以重新创建它。

Answer 1

尝试使用 ' Expanded ' 而不是 Container 或其他布局：

Column(
        children: <Widget>[
          Expanded(
            //color: Colors.white,
            child:
            ListView.builder(
                itemCount: list.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    contentPadding: EdgeInsets.all(10.0),
                    title: new Text('title'),
                    subtitle: new Text('sub title'),
                    onTap: () => clicked(list[index]['url']),
                    onLongPress: () => downloadAndStoreFile(list[index]['url'],
                        list[index]['name'], list[index]['title']),
                  );
                }),
          )
        ],
),

Answer 2

将此添加到 ListView.Builder =

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        margin: EdgeInsets.all(10),
        child: ProductControl(_addProduct),
      ),
      ListView.builder(
      physics: NeverScrollableScrollPhysics(), ///
      shrinkWrap: true, ///
      scrollDirection: Axis.vertical, ///
        itemCount: _products.length,
        itemBuilder: (BuildContext context, int index) => Card(
              child: Column(
                children: <Widget>[
                  Image.asset('assets/food.jpg'),
                  Text(_products[index])
                ],
              ),
            ),
      )
    ],
  );
}

Answer 3

我想我在发布问题后的最后一刻设法解决了这个问题。

我在问题中没有显示的是另一段代码。

基本上这就是我的代码的样子。

body: Column(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(10),
              child: ProductControl(_addProduct),
            ),
            ListView.builder(
            itemCount: _products.length,
            itemBuilder: (BuildContext context, int index) => Card(
            child: Column(
              children: <Widget>[
                Image.asset('assets/food.jpg'),
                Text(_products[index])
              ],
            ),
          ),
        )
      ],
    ),
   ],
 ),

问题是我有一个带有 Column 的 Column 作为直接子级，显然 ListView 不喜欢那样..所以通过删除第一列，我可以将我的 ListView 包装在一个 Expanded 小部件中，一切正常。也许这可以帮助别人。