在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

MainAxisAlignment

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

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

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

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

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

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

例:

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

Answer 2

删除空间-：

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 3

这样做的方法很多，这里列出了一些方法：

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

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

   

2. 使用Spacer，如果你想既要尽可能远离可能的。

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

   

3. 使用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并使其对齐

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

   

Answer 4

You can use Spacers if all you want is a little bit of spacing between items in a row. The example below centers 2 Text widgets within a row with some spacing between them.

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

Answer 5

为了获得精确的间距，我使用Padding. 有两个图像的示例：

Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Image.asset('images/user1.png'),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Image.asset('images/user2.png'),
        ),
      )
    ],
  ),

Answer 6

Row(
 children: <Widget>[
  Flexible(
   child: TextFormField()),
  Container(width: 20, height: 20),
  Flexible(
   child: TextFormField())
 ])

这对我有用，行内有 3 个小部件：灵活、容器、灵活

Answer 7

只需在元素之间添加“Container(width: 5, color: Colors.transparent),”

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))),
          ),
            Container(width: 5, color: Colors.transparent),
          new FlatButton(
            child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
            onPressed: moveToRegister,
          )
        ],
      ),
    ),