Flutter 嵌套 ListView.builder 抛出错误

Question

我正在将两个ListView.builder放在一个小部件屏幕中，但是我收到以下错误：

The following assertion was thrown during performLayout():
I/flutter (17103): RenderFlex children have non-zero flex but incoming         
height constraints are unbounded.
I/flutter (17103): When a column is in a parent that does not provide a     
finite height constraint, for example if it is
I/flutter (17103): in a vertical scrollable, it will try to shrink-wrap its 
children along the vertical axis. Setting a
I/flutter (17103): flex on a child (e.g. using Expanded) indicates that the 
child is to expand to fill the remaining
I/flutter (17103): space in the vertical direction.
I/flutter (17103): These two directives are mutually exclusive. If a parent 
is to shrink-wrap its child, the child
I/flutter (17103): cannot simultaneously expand to fit its parent.
I/flutter (17103): Consider setting mainAxisSize to MainAxisSize.min and 
using FlexFit.loose fits for the flexible
I/flutter (17103): children (using Flexible rather than Expanded). This will 
allow the flexible children to size
I/flutter (17103): themselves to less than the infinite remaining space they 
would otherwise be forced to take, and
I/flutter (17103): then will cause the RenderFlex to shrink-wrap the 
children rather than expanding to fit the maximum
I/flutter (17103): constraints provided by the parent.
I/flutter (17103): The affected RenderFlex is:
I/flutter (17103):   RenderFlex#446cb relayoutBoundary=up14 NEEDS-LAYOUT 
NEEDS-PAINT

这是我的代码：

@override
Widget build(BuildContext context) {
if (!loaded) _loadZones();
return new Scaffold(
body: new Column(
children: <Widget>[
new Padding(padding: EdgeInsets.fromLTRB(0, 20, 0, 0)),
new Expanded(
child: new ListView.builder(
itemCount: zones.length,
itemBuilder: (BuildContext context, int index) {
Zone zone = zones[index];
List<Place> places = zone.places;
print(zone.toString());
print(places.length);
return InkWell(
onTap: () {
Navigator.push(
context,
FromRightToLeft(
builder: (context) => CondominiumScreen(zone.id)),
);
},
child: Card(
color: Colors.white,
key: Key(zone.name),
margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
child: new InkWell(
child: new Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.place),
title: Row(
children: <Widget>[
Icon(
Icons.place,
color: Colors.grey,
),
Text(
' ${zone.name}',
style: TextStyle(fontSize: 20),
),
],
)),
new Divider(),
new Flexible(
child: new ListView.builder(
itemCount: places.length,
itemBuilder: (BuildContext ct, int i) {
Place place = places[i];
return Text(
"● ${place.name}",
textAlign: TextAlign.start,
);
}),
),
new Divider(),
new Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
),
Expanded(
flex: 50,
child: InkWell(
child: FlatButton(
child: const Text('Reportes'),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.black12)),

块引用

splashColor: Colors.white10,
color: Colors.white,
onPressed: () {
/* ... */
})),
),
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0)),
Expanded(
flex: 50,
child: InkWell(
child: FlatButton(
child: const Text('Turnos'),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.black12)),
splashColor: Colors.white10,
color: Colors.white,
onPressed: () {
/* ... */
})),
),
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
),
],
),
],
))));
}))
],
));

}

我尝试在每列中将 mainAxisSize 放入 MainAxisSize.min，但它不起作用。

在 performLayout() 期间抛出了以下断言：

I/flutter (17956): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (17956): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (17956): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (17956): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (17956): space in the vertical direction.
I/flutter (17956): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (17956): cannot simultaneously expand to fit its parent.
I/flutter (17956): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (17956): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (17956): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (17956): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (17956): constraints provided by the parent.

Answer 1

为了修复代码中的给定错误 - 你需要做两件事- 添加shrinkWrap: true，在ListView.builder和删除 灵活在第二个ListView.builder-

更新后的代码如下所示：

Widget build(BuildContext context) {
if (!loaded) _loadZones();
return new Scaffold(
body: new Column(
children: <Widget>[
new Padding(padding: EdgeInsets.fromLTRB(0, 20, 0, 0)),
new Expanded(
child: new ListView.builder(
shrinkWrap: true,   //Added
itemCount: zones.length,
itemBuilder: (BuildContext context, int index) {
Zone zone = zones[index];
List<Place> places = zone.places;
print(zone.toString());
print(places.length);
return InkWell(
onTap: () {
Navigator.push(
context,
FromRightToLeft(
builder: (context) => CondominiumScreen(zone.id)),
);
},
child: Card(
color: Colors.white,
key: Key(zone.name),
margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
child: new InkWell(
child: new Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.place),
title: Row(
children: <Widget>[
Icon(
Icons.place,
color: Colors.grey,
),
Text(
' ${zone.name}',
style: TextStyle(fontSize: 20),
),
],
)),
new Divider(),
new ListView.builder(   //removed Flexible
shrinkWrap: true, //Added
itemCount: places.length,
itemBuilder: (BuildContext ct, int i) {
Place place = places[i];
return Text(
"● ${place.name}",
textAlign: TextAlign.start,
);
}),
new Divider(),
new Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
),
Expanded(
flex: 50,
child: InkWell(
child: FlatButton(
child: const Text('Reportes'),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.black12)),
splashColor: Colors.white10,
color: Colors.white,
onPressed: () {
/* ... */
})),
),
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0)),
Expanded(
flex: 50,
child: InkWell(
child: FlatButton(
child: const Text('Turnos'),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.black12)),
splashColor: Colors.white10,
color: Colors.white,
onPressed: () {
/* ... */
})),
),
Padding(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
),
],
),
],
))));
}))
],
));
}

Answer 2

使用嵌套列表视图时，必须为内部列表视图指定高度约束。还要记住，当列表视图中有一列时，如果不指定列高，就不能使用展开的子项。

要指定高度约束，只需将各个小部件包装在带有高度的Container中即可。

如果您不想指定高度并让框架布局子项。 因此，请删除内部ListView.builder并将其替换为Column，也请删除根ListView内没有父级具有高度信息的任何Expanded或Flexible小部件。