为什么我的小工具不在屏幕的中心？
为什么我的小工具不在屏幕的中心？
提问于 2020-05-27 02:23:22
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'BMI:',
style: TextStyle(color: Colors.white, fontSize: 50.0),
),
FlatButton(
child: Text('GO BACK'),
color: Colors.grey,
onPressed: () {
Navigator.pop(context);
},
)
],
),
);}我只希望文本和按钮是在屏幕的中心垂直和水平。我将主轴和交叉轴对齐到中心，但列在屏幕的左侧，尽管它垂直居中。只是不是水平的；我想这就是交叉对齐的目的，为什么不居中对齐呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-05-27 02:59:09
问题是: CrossAxisAlignment可以工作，但是您的列只有在图像上显示的宽度。这样看起来好像什么都没发生。
thereFore您可以将整个column小部件包装在中心小部件中以使其正常工作。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'BMI:',
style: TextStyle(color: Colors.white, fontSize: 50.0,),
),
FlatButton(
child: Text('GO BACK'),
color: Colors.grey,
onPressed: () {
Navigator.pop(context);
},
)
],
),
),
);
}有关更多信息，请查看此问题link。希望这能有所帮助。
提示：-使用android studio中的Flutter Inspector来获得关于小部件位置和对齐的正确想法。
Stack Overflow用户
发布于 2020-05-27 02:40:02
我认为这是因为列的宽度和它最大的子元素一样宽，这意味着如果你没有一个非常宽的元素，它会根据最宽的子元素将所有其他元素放在中心位置，所以如果你添加了：
Container(width:MediaQuery.of(context).size.width),到您的子列，这也应该解决这个问题。
Stack Overflow用户
发布于 2020-05-27 03:04:41
使用Android studio中的检查器工具，该列不会占据设备的全宽。
因此，您可以将其包装在中心小部件中：
Center(
child:Column(children:[...],...)
);或者将其包装在容器中并指定高度。
Container(
height: value,
child:Column(children:[...],...)
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62034399
复制相关文章
相似问题
腾讯云开发者
