我最近一直有这个问题,当使用
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(onPressed: (){}, child: Text('please'),),
RaisedButton(onPressed: (){}, child: Text('center'),)
],
),
);
}
}
导致子小部件左对齐
screenshot任何帮助都将不胜感激
4条答案
按热度按时间s1ag04yj1#
这是因为Column不会水平占用所有可用空间。您可以这样做:
ilmyapht2#
如果您不需要添加额外的小部件,只需将小部件打包到“中心”小部件即可。
但我想你可能需要一些小部件。
如果是,则使用容器小部件。
u0njafvf3#
对于行:
主轴对齐=水平轴
交叉轴对齐=垂直轴
对于列:
主轴对齐=垂直轴
横轴对齐=水平轴
使用Row时,其子代将按行水平布局。因此,Row的主轴是水平的。在Row中使用mainAxisAlignment可使您水平对齐行的子代(例如,左、右)。行主轴的横轴是垂直的。因此,在Row中使用crossAxisAlignment可使您定义其子代垂直对齐的方式。
在Column中,情况正好相反。Column的子元素是垂直布局的,从上到下(默认)。因此它的主轴是垂直的。这意味着,在Column中使用mainAxisAlignment垂直对齐它的子元素(例如,顶部、底部),而crossAxisAlignment定义子元素在该Column中如何水平对齐。
行/列与轴关联:
行水平列垂直
mainAxisAlignment是项在该轴上的对齐方式。crossAxisAlignment是项在另一个轴上的对齐方式。
要了解更多详细信息,请阅读此处Flutter crossAxisAlignment vs mainAxisAlignment
我希望它的帮助:)
owfi6suc4#
您可以使用对齐()
像这样: