我试图建立一个布局,其中有两个文本对象在顶部和底部,保持文具和一个列表视图在其中心。
下面是屏幕的代码
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 40.0),
child: Text(
DateFormat("hh:mm 'PM ,' MMMM d").format(DateTime.now()),
style: Theme.of(context).textTheme.title,
),
),
Expanded(
child: ListView.builder(
itemCount: 4,
itemBuilder: (BuildContext context, int index) =>
CustomAppText(
text: 'Custom App',
),
),
),
Container(
margin: EdgeInsets.symmetric(vertical: 40.0),
child: Text(
"Settings",
style: Theme.of(context).textTheme.title,
),
),
],
),
),
),
);
}
}
给定代码
的输出
我正在寻找的设计
我尝试过使用“居中”小部件,但它不能使ListView居中
8条答案
按热度按时间jslywgbw1#
ListView填充了整个Expanded Widget,这就是为什么使用Center Widget不起作用的原因,因此应该添加
shrinkWrap: true
,以便ListView只采用其子控件的高度。浏览完文档后,我找到了关于FlexibleWidget的内容
做了改变,工作起来很有魅力
xu3bshqb2#
对于那些还在寻找答案的人来说,这是对我起作用的:
Expanded小工具使内容占据所有可用空间。
居中小工具将您要显示的内容居中。
ListView保存列表内容和**“收缩环绕:true”属性使您的列表视图根据内容大小缩小(在占用空间不多时,允许通过Center**小工具将其集中)。
tvmytwxo3#
希望有帮助。给予顶部和底部的小部件25%的屏幕大小。给列表视图50%的屏幕大小。
rqcrx0a64#
只需在
Column
中添加一个Expanded
作为第一个Container
的 Package 器lb3vh1jj5#
只需将ListView.builder Package 在一个容器类中,并为它指定一个高度,可以显式地以两倍或屏幕高度的百分比表示。
nlejzf6q6#
添加两个垫片,将给予与预期完全相同的结果
j91ykkif7#
必须使用收缩 Package :true和Flexible一起显示ListView的所有项。
vd8tlhqk8#
如果你用
Container
替换你的Expanded
小部件,并给予它一个固定的height
,我想你得到了你想要的。