flutter - 在 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://dartpad.dev/?id=6bbfc6139bdf32aa7b47eebcdf9623ba

如何解决两个FlatButton元素并排的问题？屏幕宽度的中心之间没有空格？

Answer 1

有很多方法，我在这里列出一些:

1. 如果你想设置一些特定的空间，请使用 SizedBox

   Row(
     children: <Widget>[
       Text("1"),
       SizedBox(width: 50), // give it width
       Text("2"),
     ],
   )
   

   

---

1. 如果您希望两者尽可能地分开，请使用 Spacer。

   Row(
     children: <Widget>[
       Text("1"),
       Spacer(), // use Spacer
       Text("2"),
     ],
   )
   

   

---

1. 根据需要使用mainAxisAlignment:

   Row(
     mainAxisAlignment: MainAxisAlignment.spaceEvenly, // use whichever suits your need
     children: <Widget>[
       Text("1"),
       Text("2"),
     ],
   )
   

   

---

4. 使用 Wrap 代替 Row 并提供一些 spacing

   Wrap(
     spacing: 100, // set spacing here
     children: <Widget>[
       Text("1"),
       Text("2"),
     ],
   )
   

   

---

5. 使用 Wrap 代替 Row 并赋予它alignment

   Wrap(
     alignment: WrapAlignment.spaceAround, // set your alignment
     children: <Widget>[
       Text("1"),
       Text("2"),
     ],
   )