在Row Flutter中设置Elements之间的空间

Question

码：

new Container(
          alignment: FractionalOffset.center,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new FlatButton(
                child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
              ),
              new FlatButton(
                child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
                onPressed: moveToRegister,
              )
            ],
          ),
        ),  

这是结果： https://www.dropbox.com/s/sxklyutyvbbura8/Screenshot_20181104-150928.png?dl=0

如何确定两个FlatButton元素并排，屏幕宽度中心之间没有空格？

Answer 1

删除空间 - ：

new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                child: new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                onTap: () {},
              ),
              GestureDetector(
                onTap: (){},
                  child: new Text(
                'Register.',
                style: new TextStyle(
                    color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
              ))
            ],
          ),

要么

GestureDetector(
            onTap: (){},
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                new Text(
                  'Register.',
                  style: new TextStyle(
                  color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),

Answer 2

MainAxisAlignment

开始 - 将孩子放在尽可能靠近主轴起点的位置。

end - 将子项尽可能靠近主轴的末端。

center - 将孩子放在尽可能靠近主轴中间的位置。

spaceBetween - 在子节点之间均匀放置可用空间。

spaceAround - 将自由空间均匀放置在子节点之间，以及第一个和最后一个子节点之前和之后的一半空间。

spaceEvenly - 将自由空间均匀放置在孩子之间以及第一个和最后一个孩子之前和之后。

例：

  child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text('Row1'),
          Text('Row2')
        ],
      )

Answer 3

如果你想要的只是在一行中的项目之间有一点间距，你可以使用Spacers。下面的示例将2个Text小部件集中在一行中，它们之间有一些间距。

    widget = Row (
    children: <Widget>[
      Spacer(flex: 20),
      Text(
        "Item #1",
      ),
      Spacer(),  // Defaults to flex: 1
      Text(
        "Item #2",
      ),
      Spacer(flex: 20),
    ]
  );

Answer 4

使用MainAxisAlignment.spaceBetween

  new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Text("Left"),
      Text("Right")
    ],
  ),

Answer 5

试试这个

Container(
      alignment: FractionalOffset.center,
      child: Row(
        children: <Widget>[
          Expanded(flex: 1, child: Container(),), // remove 1
           FlatButton(
            padding: EdgeInsets.all(0.0), // remove all padding from button 1
            onPressed: () {},
            child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
          ),
           FlatButton(
            child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
            onPressed: (){},
          ),
          Expanded(flex: 1, child: Container(),), // remove 2
        ],
      ),
    );

如果您不想在按钮的左侧和右侧添加空格，则可以删除1和2。