Flutter柱CrossAxisAlignment.center未居中

30byixjq  于 2023-03-13  发布在  Flutter
关注(0)|答案(4)|浏览(315)

我最近一直有这个问题,当使用

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任何帮助都将不胜感激

s1ag04yj

s1ag04yj1#

这是因为Column不会水平占用所有可用空间。您可以这样做:

class _LoginPageState extends State<LoginPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
             SizedBox(width : double.infinity),
              RaisedButton(onPressed: (){}, child: Text('please'),),
              RaisedButton(onPressed: (){}, child: Text('center'),)
            ],
          ),
        );
      }
    }
ilmyapht

ilmyapht2#

如果您不需要添加额外的小部件,只需将小部件打包到“中心”小部件即可。

return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RaisedButton(onPressed: (){}, child: Text('please'),),
        RaisedButton(onPressed: (){}, child: Text('center'),)
      ],
    ),
  ),
);

但我想你可能需要一些小部件。
如果是,则使用容器小部件。

return Scaffold(
  body: Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(onPressed: (){}, child: Text('please'),),
            RaisedButton(onPressed: (){}, child: Text('center'),)
          ],
        ),
      ],
    ),
  ),
);
u0njafvf

u0njafvf3#

对于行:

主轴对齐=水平轴
交叉轴对齐=垂直轴

对于列:

主轴对齐=垂直轴
横轴对齐=水平轴
使用Row时,其子代将按行水平布局。因此,Row的主轴是水平的。在Row中使用mainAxisAlignment可使您水平对齐行的子代(例如,左、右)。行主轴的横轴是垂直的。因此,在Row中使用crossAxisAlignment可使您定义其子代垂直对齐的方式。
在Column中,情况正好相反。Column的子元素是垂直布局的,从上到下(默认)。因此它的主轴是垂直的。这意味着,在Column中使用mainAxisAlignment垂直对齐它的子元素(例如,顶部、底部),而crossAxisAlignment定义子元素在该Column中如何水平对齐。

行/列与轴关联:

行水平列垂直
mainAxisAlignment是项在该轴上的对齐方式。crossAxisAlignment是项在另一个轴上的对齐方式。
要了解更多详细信息,请阅读此处Flutter crossAxisAlignment vs mainAxisAlignment
我希望它的帮助:)

owfi6suc

owfi6suc4#

您可以使用对齐()
像这样:

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Align(
            RaisedButton(onPressed: (){}, child: Text('please'),),
            RaisedButton(onPressed: (){}, child: Text('center'),)
          )
        ],
      ),
    );
  }
}

相关问题