Flutter Row主轴对中不起作用 [英] Flutter Row main axis alignment not working

问题描述

我正在尝试将两个材质按钮连续放置，并且它们之间要有均匀的间隔.但是mainAxisAlignment小部件不起作用.这两个按钮在行的开头彼此粘在一起.

I'm trying to place two materialbuttons in a row with even space in between. But mainAxisAlignment widget is not working. Both the buttons are sticked to each other at the start of the row.

Widget _buildSignInButton() {
    return Row(
      children: <Widget>[
        Container(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              new SignInButton(
                onPressed: () {
                  _googleSignIn();
                },
                imageUrl: 'assets/images/glogo.png',
              ),
              new SignInButton(
                onPressed: () {
                  _fbSignIn();
                },
                imageUrl: 'assets/images/fblogo.png',
              ),
            ],
          ),
        )
      ],
    );
  }

 Widget build(BuildContext context) {
    return Container(
        child: _buildSignInButton()


    );
  }

推荐答案

尝试简化这样的代码:

Row(
  // children: <Widget>[
  //   new Container(
  //     child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          new Text('123'),
          new Text('456'),
        ],
  //     ),
  //   ),
  // ],
),

或将Container替换为Expanded:

Row(
  children: <Widget>[
    new Expanded(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          new Text('123'),
          new Text('456'),
        ],
      ),
    ),
  ],
),

查看文档以获取有关差异的更多详细信息: https://flutter.io/docs/development/ui/layout/box-constraints#flex

Checkout the doc for more details about the differences: https://flutter.io/docs/development/ui/layout/box-constraints#flex

这篇关于Flutter Row主轴对中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！