Flutter：为啥我收到“垂直视口被赋予无限高度”错误？
Posted
技术标签:
【中文标题】Flutter：为啥我收到“垂直视口被赋予无限高度”错误？【英文标题】：Flutter: Why I am getting "Vertical viewport was given unbounded height" error?Flutter：为什么我收到“垂直视口被赋予无限高度”错误？ 【发布时间】：2019-07-29 07:30:52 【问题描述】：我是 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)
这是为什么？
【问题讨论】：
【参考方案1】：您不需要任何您创建的列，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
编辑：添加示例代码
【讨论】：
感谢您的帮助！【参考方案2】：因为 column 小部件没有父级来获取它的大小，所以它 height 是无限的，一个好的解决方案是将您的 column 包装在 Container 小部件中，其大小大小与设备屏幕匹配：
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: 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"),
)
],
) );
【讨论】：
一点也不，非常感谢您的补充支持！以上是关于Flutter：为啥我收到“垂直视口被赋予无限高度”错误？的主要内容，如果未能解决你的问题，请参考以下文章
Flutter ios：我收到“（在通道 plugins.flutter.io/firebase_core 上找不到方法 Firebase#initializeCore 的实现）”，不明白为啥
为啥在 Flutter 中使用 firebase_messaging 插件在 ios 中没有收到通知？