Question

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

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

据我了解，ListView试图占用无数空间，这显然会使应用程序崩溃。

我也开始理解您不能将ListView作为Column / Row的直接子代（我在下面解释了我试图做的事情） https://flutter.io/docs/development/ui/layout/box-constraints#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包装在具有设置height属性的Container小部件中。但是对我来说，必须使用具有设定高度的容器似乎不对。

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

Answer 1

我认为我在发布问题后立即解决了这一问题。

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

基本上这就是我的代码。

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的列，而ListView显然不喜欢这样。.因此，通过删除第一个Column，我可以将ListView包裹在Expanded窗口小部件中，并且一切正常。也许这可以帮助其他人。

Answer 2

尝试使用“ 扩展”代替“容器”或其他布局：

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 3

将此添加到ListView.Builder =

<select class="form-control" id="parent_id" name="parent_id" data-live-search="true">
    <option value="">Select Parent</option> 
    @foreach($allCategory as $cate)
        <option value="{{ $cate->id }}" {{ $category->id == $cate->id ? 'selected' : ''  }}>{{ $cate->name }}</option>
    @endforeach
</select>

Flutter ListView在列内崩溃

3 个答案: