ListView.builder 不工作

Posted 2023-02-23

【中文标题】ListView.builder 不工作

【英文标题】：ListView.builder not working

【发布时间】：2018-12-02 17:33:32

【问题描述】：

尝试实现flutter-firebase时，ListView.builder显示失败！

注意，当我尝试显示没有ListView.builder 的第一个元素时，它工作正常，即错误仅与此代码块相关：

return ListView.builder(
    itemCount: snapshot.data.documents.length,
    padding: const EdgeInsets.only(top: 10.0),
    itemExtent: 25.0,
    itemBuilder: (context, index) 
    DocumentSnapshot ds = snapshot.data.documents[index];
    return Text(" $ds['name'] $ds['vote']");
);

我的完整代码是：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(MyApp(
  textInput: Text("Text Widget"),
));

class MyApp extends StatefulWidget 
  final Widget textInput;
  MyApp(this.textInput);

  @override
  State<StatefulWidget> createState() => MyAppState();


class MyAppState extends State<MyApp> 
  bool checkBoxValue = false;
  @override
  Widget build(BuildContext ctxt) 
    return new MaterialApp(
      home: SafeArea(
        child: Scaffold(
            body: new Center(
                child: new Column(
                  children: <Widget>[
                    widget.textInput,
                    Checkbox(
                        value: checkBoxValue,
                        onChanged: (bool newValue)
                          setState(() 
                            checkBoxValue = newValue;
                          );
                        
                    ),
                    StreamBuilder(
                        stream: Firestore.instance.collection('baby').snapshots(),
                        builder: (context, snapshot) 
                          if (!snapshot.hasData) return const Text('Loading...');

                           //   DocumentSnapshot ds = snapshot.data.documents[0];
                           //   return new Text(" $ds['name'] $ds['vote']");

                          // When i try to replace the above code by the below it fails!
                               return ListView.builder(
                                itemCount: snapshot.data.documents.length,
                                padding: const EdgeInsets.only(top: 10.0),
                                itemExtent: 25.0,
                                itemBuilder: (context, index) 
                                DocumentSnapshot ds = snapshot.data.documents[index];
                                return Text(" $ds['name'] $ds['vote']");
                              );
                           // End of the ListView builder that fails!

                        ),
                  ],
                ))),
      ),
    );
  

更新

我得到的错误是：

正在执行热重载... I /颤振（9119）：══╡渲染库╞═════════════════════════════════════════════ ═══════════════════════ I/flutter (9119)：在 performResize() 期间抛出了以下断言： I/flutter (9119)：垂直视口被赋予了无限的高度。 I/flutter (9119)：视口在滚动方向扩展以填充其容器。在这种情况下，垂直 I/flutter (9119)：视口被赋予了无限量的垂直空间来扩展。这个情况 I/flutter (9119)：通常发生在可滚动小部件嵌套在另一个可滚动小部件中时。 I/flutter (9119)：如果这个小部件总是嵌套在一个可滚动的小部件中，则不需要使用视口，因为 I/flutter (9119)：总会有足够的垂直空间供孩子们使用。在这种情况下，请考虑使用 Column 我/颤动（9119）：相反。否则，请考虑使用“shrinkWrap”属性（或 ShrinkWrappingViewport）来调整大小 I/flutter (9119)：视口的高度与其子项的高度之和。 我/颤振（9119）： I/flutter (9119)：当异常被抛出时，这是堆栈： 我/颤振（9119）：#0 RenderViewport.performResize。 （包：flutter/src/rendering/viewport.dart:985:15） I/flutter (9119): #1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1038:6) I/flutter (9119): #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9) I/flutter (9119): #3 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #4 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #5 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #6 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #7 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #9 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #10 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #11 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #12 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #13 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #14 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #15 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #16 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #17 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #18 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #19 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15) I/flutter (9119): #20 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #21 RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:381:13) I/flutter (9119): #22 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #23 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11) I/flutter (9119): #24 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:399:7) I/flutter (9119): #25 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7) I/flutter (9119): #26 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14) I/flutter (9119): #27 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #28 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #29 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #30 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #31 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11) I/flutter (9119): #32 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #33 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11) I/flutter (9119): #34 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #35 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #36 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #37 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #38 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #39 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #40 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #41 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #42 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #43 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #44 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #45 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #46 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #47 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #48 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #49 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #50 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2831:13) I/flutter (9119): #51 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #52 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) I/flutter (9119): #53 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #54 __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #55 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #56 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #57 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #58 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #59 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #60 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #61 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #62 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #63 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #64 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) I/flutter (9119): #65 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) I/flutter (9119): #66 RenderView.performLayout (package:flutter/src/rendering/view.dart:125:13) I/flutter (9119): #67 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1445:7) I/flutter (9119): #68 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:709:18) I/flutter (9119): #69 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19) I/flutter (9119): #70 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:627:13) I/flutter (9119): #71 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5) I/flutter (9119): #72 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) I/flutter (9119): #73 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) 我/颤振（9119）：#74 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame。 （包：flutter/src/scheduler/binding.dart:751:7） I/flutter (9119):#76 _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19) I/flutter (9119): #77 _Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5) I/flutter (9119):#78 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:165:12) I/flutter（9119）：（从包 dart:async 中省略一帧） 我/颤振（9119）： I/flutter (9119)：触发异常时正在处理以下 RenderObject： I/flutter (9119): RenderViewport#a2532 需要-布局需要-油漆 I/flutter（9119）：创建者：视口←_ScrollableScope←IgnorePointer-[GlobalKey#363cb]←语义←侦听器← 我/颤振（9119）：_GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#08fb7] ← I/flutter (9119): _ExcludableScrollSemantics-[GlobalKey#8d2f7] ← RepaintBoundary ← CustomPaint ← RepaintBoundary ← I/flutter (9119): NotificationListener ← ⋯ I/flutter (9119): parentData: (可以使用大小) I/flutter (9119): 约束：BoxConstraints(0.0 ClampingScrollPhysics, IdleScrollActivity#d36b9, 我/颤振（9119）：ScrollDirection.idle） I/颤振（9119）：锚：0.0 I/flutter (9119)：这个 RenderObject 有以下后代（显示深度为 5）： I/flutter (9119): RenderSliv​​erPadding#9ca2b 需要-布局需要-油漆 I/flutter（9119）：RenderSliv​​erFixedExtentList#1cb4d 需要-布局需要-油漆 我/颤振（9119）：RenderRepaintBoundary#8c403 需要-布局需要-油漆 我/颤振（9119）：RenderParagraph#c05e3 需要-布局需要-油漆 我/颤振（9119）：═══════════════════════════════════════════════════════════════════ ══════════════════════════════════════════════════ ═══════ I/flutter (9119)：引发另一个异常：RenderBox 未布置：RenderViewport#a2532 NEEDS-LAYOUT NEEDS-PAINT I/flutter (9119)：引发了另一个异常：未布置 RenderBox：RenderViewport#a2532 NEEDS-PAINT I/flutter (9119): 另一个异常被抛出: RenderBox 没有布局: RenderIgnorePointer#cfad6 relayoutBoundary=up10 NEEDS-PAINT I/flutter（9119）：引发另一个异常：RenderBox 未布置：RenderSemanticsAnnotations#2fd15 relayoutBoundary=up9 NEEDS-PAINT I/flutter（9119）：引发另一个异常：RenderBox 未布置：RenderPointerListener#0da92 relayoutBoundary=up8 NEEDS-PAINT I/flutter (9119)：抛出另一个异常：RenderBox 未布置：RenderSemanticsGestureHandler#588c9 relayoutBoundary=up7 NEEDS-PAINT I/flutter（9119）：引发另一个异常：未布置 RenderBox：_RenderExcludableScrollSemantics#ad008 relayoutBoundary=up6 NEEDS-PAINT I/flutter (9119): 另一个异常被抛出: RenderBox 没有布局: RenderRepaintBoundary#1e512 relayoutBoundary=up5 NEEDS-PAINT I/flutter (9119)：引发另一个异常：RenderBox 未布置：RenderCustomPaint#ab136 relayoutBoundary=up4 NEEDS-PAINT I/flutter (9119): 另一个异常被抛出: RenderBox 没有布局: RenderRepaintBoundary#e6025 relayoutBoundary=up3 NEEDS-PAINT 在 1,363 毫秒内重新加载了 394 个库中的 1 个。 I/flutter (9119): 另一个异常被抛出: RenderBox 没有布局: RenderRepaintBoundary#e6025 relayoutBoundary=up3 NEEDS-PAINT

【问题讨论】：

你能把错误包括进来吗？

@RémiRousselet 刚刚添加。

【参考方案1】：

将您的StreamBuilder 包装成Expanded。因为它在 Column 里面

【讨论】：

我怎样才能使用Card 作为Child 而不是Text，你能帮忙吗：***.com/questions/51002111/adding-card-to-listview

【参考方案2】：

我发现了真正的问题，它在：

   return ListView.builder(
         itemExtent: 25.0 . // this made the limitation
)

我应该删除itemExtent，所以默认情况下列表可以展开:)

【讨论】：

您的错误与此无关。最多删除itemExtent 将修复溢出异常。不是Vertical viewport was given unbounded height。

【参考方案3】：

您可以按照错误消息中的指示添加属性shrinkWrap: true：

return ListView.builder(
   shrinkWrap: true,
   ...
)