ListView内部的Column导致'垂直视口给出了无界限的高度'。
ListView内部的Column导致'垂直视口给出了无界限的高度'。
我是Flutter的新手，对于布局有些困扰。
我想要实现如下所示的效果：
一个粘性的标题栏和下方的滚动视图。
我考虑使用Column小部件，其中有两个子部件 - 第一个是标题，第二个是ListView。
以下是我的代码：
Widget build(BuildContext context) {
return Material(
elevation: 8.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
title,
style:
Theme.of(context).textTheme.subhead.copyWith(fontSize: 18.0),
textAlign: TextAlign.left,
),
),
Divider(height: 4.0),
ListView.builder(itemBuilder: (context, i) {
return ListTile(
title: Text("Title $i"),
subtitle: Text("Subtitle $i"),
);
}),
],
),
);
}
但是我遇到了以下错误。
I/flutter ( 5725): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 5725): 在调整大小期间抛出了以下断言错误：
I/flutter ( 5725): 垂直视口给出了无界高度。
I/flutter ( 5725): 视口在滚动方向上扩展以填充其容器。在这种情况下，垂直视口被给予了无限制的垂直空间来扩展。这种情况通常发生在一个可滚动的小部件嵌套在另一个可滚动的小部件中。
I/flutter ( 5725): 如果此小部件始终嵌套在一个可滚动的小部件中，则不需要使用视口，因为始终会有足够的垂直空间来容纳子部件。在这种情况下，考虑使用Column。
I/flutter ( 5725): 否则，考虑使用“shrinkWrap”属性（或ShrinkWrappingViewport）将视口的高度调整为其子部件高度的总和。
我按照提示将ListView的shrinkWrap属性设置为true，但也没有起作用。
这个布局的父级是一个堆叠，包含了多个类似的布局页面，除了用户选择的那个页面，其他所有布局页面都处于非活动状态。
我做错了什么？
"ListView inside Column causes 'Vertical viewport was given unbounded height'" 这个问题的出现是因为ListView作为Column的子组件时，Column没有指定高度，导致ListView无法确定自己的高度。解决方法是使用Flexible或Expanded组件将ListView进行包裹，以便告诉ListView如何适应给定的高度。
具体的解决方法如下所示：
Flexible(
child: ListView.builder(
itemBuilder: (context, i) {
return ListTile(
title: Text("Title $i"),
subtitle: Text("Subtitle $i"),
);
},
),
),
这种方法可以解决问题，但是在Flutter的文档中，并没有明确提到使用Flexible或Expanded来解决此类问题。试过使用ConstrainedBox、FittedBox、Expand等方法，但都没有解决。不过还是要感谢给予帮助的人。另外，这个问题与ListView有无限数量的子项有关，需要告诉ListView如何适应给定的高度。
然而，上述方法并不能解决问题，现在我得到了一个新的错误提示："RenderFlex children have non-zero flex but incoming height constraints are unbounded."