Flutter 颤振：如何修复底部溢流
我有一个flatter小部件，它的列布局有两个容器，其中一个容器有一个Flutter 颤振：如何修复底部溢流,flutter,dart,flutter-layout,Flutter,Dart,Flutter Layout,我有一个flatter小部件，它的列布局有两个容器，其中一个容器有一个ListView.builder。当页面呈现时，我得到一个 底部溢流169px 我也不知道如何修复它 我在谷歌上搜索了各种解决方案，并尝试了各种方法，比如将小部件中的一个或多个容器包装到一个扩展的小部件中，但这也不起作用。如果我仅将包含FutureBuilder的容器包装在展开的中，则列表视图根本不会呈现，我会看到如下错误： I/flutter ( 3516): Another exception was thrown: Re
ListView.builder容器扩展的FutureBuilder容器展开的中，则列表视图
根本不会呈现，我会看到如下错误：
I/flutter ( 3516): Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 3516): Another exception was thrown: RenderBox was not laid out: RenderFlex#0caf9 relayoutBoundary=up2 NEEDS-PAINT
I/flutter ( 3516): Another exception was thrown: RenderBox was not laid out: RenderFlex#963f4 relayoutBoundary=up1 NEEDS-PAINT
I/flutter ( 3516): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.
I/flatter（3516）：引发了另一个异常：RenderFlex子项具有非零flex，但传入的高度约束是无界的。
I/flatter（3516）：引发了另一个异常：RenderBox未布局：RenderFlex#0caf9 relayoutBoundary=up2 NEEDS-PAINT
I/flatter（3516）：引发了另一个异常：RenderBox未布局：RenderFlex#963f4 relayoutBoundary=up1 NEEDS-PAINT
I/flatter（3516）：引发了另一个异常：NoSuchMethodError:method'只需将您的FutureBuilder
包装到一个扩展的小部件中，并删除容器，因为您根本不需要它
Expanded(
child: FutureBuilder<UserPantry>(
future: UserPantryDao.getUserPantry(widget.userId),
...
扩展(
孩子：未来建设者(
future:UserPantryDao.getUserPantry（widget.userId），
...
发生这种情况的原因是您为列表视图
提供了无限的约束。另一个选项是向列表视图
父级添加一些高度
约束，例如将容器
中的高度设置为某个值。尝试将容器
移到外部，并将列表包装起来以扩大的方式。
正如@Miguel Ruivo所回答的，ListView必须有一个有界约束
Widget build(BuildContext context) {
return Column(children: <Widget>[
Container(
height: 40,
color: Colors.grey.withOpacity(0.5),
child: Padding(
padding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
child: TextField(
autofocus: false,
controller: searchFilterController,
keyboardType: TextInputType.text,
maxLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.white.withOpacity(1),
hintText: 'Search',
suffixIcon: Icon(
Icons.search,
color: Colors.grey,
)),
onChanged: (value) {
filter = value;
}))),
Expanded(
child: FutureBuilder<UserPantry>(
future: UserPantryDao.getUserPantry(widget.userId),
builder: (context, snapshot) {
if (snapshot.hasData) {
widget.ingredientList.clear();
if (filter == null || filter.trim() == "") {
widget.ingredientList.addAll(snapshot.data.ingredients);
} else {
for (UserIngredient ingredient in snapshot.data.ingredients) {
if (ingredient.ingredient.name
.toLowerCase()
.contains(filter.toLowerCase())) {
widget.ingredientList.add(ingredient);
}
}
}
return ListView.builder(
shrinkWrap: true,
itemCount: widget.ingredientList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(
widget.ingredientList[index].ingredient.name,
style: TextStyle(fontSize: 20.0),
));
});
} else if (snapshot.hasError) {
print(snapshot.error);
return Text(
"An error occurred while loading your pantry. Please try again.");
}
//By default just show an empty container.
return Container();
},
))
]);
}
小部件构建（构建上下文）{
返回列（子项：[
容器(
身高：40，
颜色：颜色。灰色。不透明度（0.5），
孩子：填充(
填充：LTRB（10.0,2.0,10.0,2.0）中的常数边集，
孩子：TextField(
自动对焦：错误，
控制器：searchFilterController，
键盘类型：TextInputType.text，
maxLines:1，
装饰：输入装饰(
边框：InputBorder.none，
是的，
填充颜色：颜色。白色。不透明度（1），
hintText:'搜索'，
图标：图标(
Icons.search，
颜色：颜色。灰色，
)),
一旦更改：（值）{
过滤器=值；
}))),
扩大(
孩子：未来建设者(
future:UserPantryDao.getUserPantry（widget.userId），
生成器：（上下文，快照）{
if（snapshot.hasData）{
widget.ingredientList.clear（）；
if（filter==null | | filter.trim（）==“”）{
widget.ingredientList.addAll（snapshot.data.components）；
}否则{
for（snapshot.data.components中的UserComponent成分）{
if（component.component.name）
.toLowerCase（）
.contains（filter.toLowerCase（））{
widget.IngreditList.add（成分）；
}
}
}
返回ListView.builder(
收缩膜：对，
itemCount:widget.IngreditList.length，
itemBuilder:（构建上下文，int索引）{
返回列表块(
标题：正文(
widget.IngreditList[index].component.name，
样式：TextStyle（fontSize:20.0），
));
});
}else if（snapshot.hasrerror）{
打印（快照错误）；
返回文本(
“加载您的餐具室时出错。请重试。”）；
}
//默认情况下，只显示一个空容器。
返回容器（）；
},
))
]);
}
包装ListView.separated（separatorBuilder:（context，index）=>Divider（），…）
中的展开的将解决您的问题
例如：Expanded（child:ListView.separated（separatorBuilder:（context，index）=>Divider（），itemCount:1，itemBuilder:（context，index）{return Container（height:200.0，child:…）；}）
只需用Expanded
包装列表即可。
试试这个：
Column(
children: [
Container(
child: Text("data"),
color: Colors.redAccent,
),
Expanded(child: ListView.builder(itemBuilder: (context, i) {
return Text("data");
})),
],
),
这是我已经尝试过的事情之一，但是当我这样做时，整个页面都是空白的，我在控制台中看到了这些错误：I/flatter（5471）：引发了另一个异常：RenderBox没有布局：RenderFlex#350b4 relayoutBoundary=up2 NEEDS-PAINT I/flatter（5471）：引发了另一个异常：未布置RenderBox:RenderFlex#3fe57 relayoutBoundary=up1 NEEDS-PAINT I/颤振（5471）：引发了另一个异常：NoSuchMethodError:方法“我没有你的整棵树。正如你现在所做的，它应该可以工作。不管怎样，只要为容器设置一些高度，你就可以了。在容器上设置一个高度可以解决问题，但我如何知道要使用什么高度？它不会因设备而异吗ice？是的，但您可以使用%，通过执行MediaQuery.of（context）.size.height*0.5
，将列表视图设置为使用屏幕高度的50%。但是，使用展开的时，您不应该需要这个，它也应该可以工作，因为您将展开以垂直填充视口。
Column(
children: [
Container(
child: Text("data"),
color: Colors.redAccent,
),
Expanded(child: ListView.builder(itemBuilder: (context, i) {
return Text("data");
})),
],
),