在同一个体内我试图将一个小部件与屏幕顶部对齐,另一个小部件与屏幕中心对齐。这证明是困难的。
这是我的代码:
body: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.redAccent,
width: screenWidth,
height: 50.0,
child: Center(
child: Text(
"Hello World!",
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blueAccent,
width: screenWidth,
height: 50.0,
child: Center(
child: Text(
"Thanks for the help!",
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
),
),
),
),
],
),
]),
当我的Xcode模拟器中运行此代码时,结果如下:
https://i.imgur.com/JtPKyq0.png
所以要清楚这个结果是错误的,因为我希望蓝色容器位于屏幕的中心,而不是顶部。
在此先感谢您的帮助!
一种选择是使用Expanded
小部件。此窗口小部件将展开填充父窗口中的所有可用空间,然后将子窗口置于其中心。请注意,这仅适用于Flex小部件,如Row
,Column
等。
在您的情况下,我还建议删除行宽的screenWidth
变量,并使用Expanded
小部件使容器水平填充屏幕。
这是最终的代码:
body: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded( //makes the red row full width
child: Container(
color: Colors.redAccent,
height: 50.0,
child: Center(
child: Text(
"Hello World!",
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
),
),
),
),
),
],
),
// This expands the row element vertically because it's inside a column
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// This makes the blue container full width.
Expanded(
child: Container(
color: Colors.blueAccent,
height: 50.0,
child: Center(
child: Text(
"Thanks for the help!",
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
),
),
),
),
),
],
),
),
]
),