当我在 FutureBuilder 中调用 ListView.builder 时，总是崩溃
Posted
技术标签:
【中文标题】当我在 FutureBuilder 中调用 ListView.builder 时，总是崩溃【英文标题】：When I call ListView.builder in FutureBuilder, always crashes 【发布时间】：2021-11-19 11:04:59 【问题描述】：我正在使用 cloud_firestore，并尝试显示用户信息列表。
当我在FutureBuilder 中调用ListView.builder 时，它总是崩溃。
List<dynamic> infoList = <dynamic>[];
@override
Widget build(BuildContext context)
return Scaffold(
appBar: originAppBar(context, pageNames.discovery),
body: Center(
child: FutureBuilder<DocumentSnapshot>(
future: FirebaseFirestore.instance
.collection("users")
.doc(FirebaseAuth.instance.currentUser!.uid)
.get(),
builder: (BuildContext context, AsyncSnapshot snapshot)
if (snapshot.hasData && snapshot.data!.exists)
return ListView.builder(
shrinkWrap: true,
itemCount: infoList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index)
return Text(infoList[index]);
);
return const Center(child: LinearProgressIndicator());
,
),
));
我检查了数据是否正确获取。这样;
if (snapshot.hasData && snapshot.data!.exists)
for (int i = 0; i < infoList; i++)
print(infoList[i].ToString());
此 print() 正确显示字符串。
有错误显示；
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
When the exception was thrown, this was the stack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49 throw_
packages/flutter/src/rendering/viewport.dart 1424:15 <fn>
packages/flutter/src/rendering/viewport.dart 1435:14 computeDryLayout
packages/flutter/src/rendering/box.dart 2331:12 performResize
packages/flutter/src/rendering/object.dart 1837:9 layout
packages/flutter/src/rendering/proxy_box.dart 116:7 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/proxy_box.dart 116:7 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/proxy_box.dart 116:7 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/proxy_box.dart 116:7 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/proxy_box.dart 116:7 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/proxy_box.dart 116:7 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/layout_helper.dart 56:10 layoutChild
packages/flutter/src/rendering/flex.dart 829:43 [_computeSizes]
packages/flutter/src/rendering/flex.dart 931:32 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/shifted_box.dart 437:7 performLayout
packages/flutter/src/rendering/object.dart 1858:7 layout
packages/flutter/src/rendering/custom_layout.dart 171:10 layoutChild
packages/flutter/src/material/scaffold.dart 1097:7 performLayout
packages/flutter/src/rendering/custom_layout.dart 240:7 [_callPerformLayout]
packages/flutter/src/rendering/custom_layout.dart 404:14 performLayout
packages/flutter/src/rendering/object.dart 1713:7 [_layoutWithoutResize]
packages/flutter/src/rendering/object.dart 885:17 flushLayout
packages/flutter/src/rendering/binding.dart 453:19 drawFrame
packages/flutter/src/widgets/binding.dart 883:13 drawFrame
packages/flutter/src/rendering/binding.dart 319:5 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1143:15 [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1080:9 handleDrawFrame
packages/flutter/src/scheduler/binding.dart 996:5 [_handleDrawFrame]
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 1003:13 invoke
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 157:5 invokeOnDrawFrame
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine.dart 440:45 <fn>
The following RenderObject was being processed when the exception was fired: RenderViewport#5d88f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderViewport#5d88f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=1536.0, 0.0<=h<=Infinity)
size: MISSING
axisDirection: right
crossAxisDirection: down
offset: ScrollPositionWithSingleContext#747a0(offset: 0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#220b1, ScrollDirection.idle)
anchor: 0.0
center child: RenderSliverPadding#d7763 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: paintOffset=Offset(0.0, 0.0)
constraints: MISSING
geometry: null
padding: EdgeInsets.zero
textDirection: ltr
child: RenderSliverList#e6b26 NEEDS-LAYOUT NEEDS-PAINT
parentData: paintOffset=Offset(0.0, 0.0)
constraints: MISSING
geometry: null
no children current live
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderViewport#5d88f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderViewport#5d88f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderIgnorePointer#e49f5 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderSemanticsAnnotations#2b185 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderPointerListener#7224c relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderSemanticsGestureHandler#62790 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderPointerListener#ef0e5 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: _RenderScrollSemantics#d53de relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"
The relevant error-causing widget was
Column Column:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:18:20
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Assertion failed:
hasSize
"RenderBox was not laid out: RenderViewport#5d88f NEEDS-PAINT"
The relevant error-causing widget was
ListView ListView:file:///D:/FlutterProjects/TestProject/lib/discovery.dart:27:35
════════════════════════════════════════════════════════════════════════════════
有人知道解决办法吗？
谢谢。
附加
最后，这段代码运行良好！ 我将在这里为将来的我以及对这个问题感到恼火的人编写最终代码。
List<dynamic> infoList = <dynamic>[];
body: Center(
child: FutureBuilder<DocumentSnapshot>(
future: FirebaseFirestore.instance
.collection("users")
.doc(FirebaseAuth.instance.currentUser!.uid)
.get(),
builder: (BuildContext context, AsyncSnapshot snapshot)
if (snapshot.hasData && snapshot.data!.exists)
Map<String, dynamic> data =
snapshot.data!.data() as Map<String, dynamic>;
infoList = data["info"];
return ListView.builder(
shrinkWrap: true,
itemCount: infoList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index)
return Text(infoList[index]);
);
return const Center(child: LinearProgressIndicator());
,
),
)
【问题讨论】：
尝试将listview 包裹在Expanded 中。
【参考方案1】：
在ListView.builder 中添加shrinkWrap: true,。
由于您的listview 没有界限，flutter 无法理解它会渲染多少空间，要对其进行界限，您可以使用带有高度的Sizedbox 或Container。
但它引发了另一个问题，它可以滚动或再次渲染框溢出错误！
所以最好的方法是在ListView.builder 中使用shrinkWrap 来将listview 用作动态小部件。
body: Center(
child: Column(
children: [
FutureBuilder<DocumentSnapshot>(
future: FirebaseFirestore.instance
.collection("users")
.doc(FirebaseAuth.instance.currentUser!.uid)
.get(),
builder: (BuildContext context, AsyncSnapshot snapshot)
print(snapshot.data!.exists);
if (snapshot.hasData && snapshot.data!.exists)
return ListView.builder(
shrinkWrap: true, // here this is
itemCount: infoList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index)
return Text(infoList[index].ToString());
);
return const Center(child: LinearProgressIndicator());
,
),
],
))
【讨论】：
这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review 这成功了！我将在问题中编写最新代码。ToString() 在return Text(infoList[index].ToString()); 中出错，所以我像return Text(infoList[index]); 这样写。【参考方案2】：
你只需要把空间给ListView.builder
return SizedBox(
height: 200,
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: infoList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index)
return Text(infoList[index]);
);
)
【讨论】：
谢谢。这行得通！以上是关于当我在 FutureBuilder 中调用 ListView.builder 时，总是崩溃的主要内容，如果未能解决你的问题，请参考以下文章
来自 FutureBuilder 的 Navigator.pop
如何在 FutureBuilder Flutter 中停止循环 SetState
Flutter 使用 FutureBuilder 检索列表中的数据
在构建期间调用 setState() 或 markNeedsBuild()，使用 FutureBuilder 中的 Provider 和 Flutter 中的 StreamBuilder