flutter - 由于 Flutter 中的 Listview.builder 小部件需要高度,因此我给包装小部件的容器提供的一些固定高度会导致溢出
问题描述
代码
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Search Families'),
centerTitle: true,
),
backgroundColor: StaticEntry.backColor,
body: Center(
child: FractionallySizedBox(
widthFactor: 0.8,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SearchInput(onSubmitHandler: onSubmit),
SizedBox(
height: 300,
),
resultList.isNotEmpty
? Container( // <---------------- Container that I am using to wrap the list view widget
height: 400, // <---------------- fixed height I am setting on the container that is wrapped around the ListView widget
child: ListView.builder( // <---------------- ListView widget
itemCount: 20,
itemBuilder: (context, index) {
return Text('Heyyyy!');
},
),
)
: SizedBox()
],
),
),
),
),
);
}
问题
在上面的代码中,正如我使用箭头所指出的那样,我将一个ListView
小部件包装在 a 中Container
并为其分配一个固定的高度,Container
因为ListView
小部件默认具有无限的高度。
这种方法的问题是,由于我提供给容器的高度是固定高度,因此布局在视口高度较小的设备上会中断,而在视口高度较大的设备上则可以正常工作。
所以我想弄清楚的是,如何Container
在不破坏布局的情况下设置适用于所有设备的高度?(我试图在不使应用程序在较小设备上中断的情况下尽可能地使该高度最大化。)
(在研究这个时,我遇到了这个堆栈溢出链接,根据那个链接,我尝试ListView
用一个小部件包装小Flexible
部件并将小部件的shrinkWrap
属性设置ListView
为true
。这不起作用,它导致我ListView
的小部件和另一个小部件在它们之间获得尽可能多的空间并将我的ListView
小部件推到屏幕底部。)
解决方案
推荐阅读
- node.js - Node JS 反向代理 - POST 抛出 404 错误
- docker - 你可以在 windows-server-core docker 容器中运行 gulp 吗?
- wordpress - 无法再访问 Wordpress 资产
- c# - 为同一应用程序的两个不同站点配置 web.config
- react-native - 当我在同一个应用程序中切换页面时如何保持地理定位运行?
- javascript - 从 json 和 url 检索数据
- html - 边框增加了额外的 1px
- java - 如何将 Java AES - CBC 与 PKCS5 填充更改为 PHP
- angular - 验证 mat-autocomplete 是对象
- python - 复制嵌套列表并用连续的数字填充