我是新手，下面是我的代码
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)
这是为什么？
答案 0 :(得分：1)
由于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"),
)
],
) );
答案 1 :(得分：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'])
)
],
),
);
}
}
编辑：实际上，您需要第一个列，并且如果要向每个项目添加列和更多信息，则_listBuilder中的列也可以保留。只需删除ListView.builder上方的列
编辑：添加示例代码