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

MaintenanceAlignment

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

末端-将子对象放置在尽可能靠近主轴末端的位置。

中心-将子项放置在尽可能靠近主轴中心的位置。

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),
              ))
            ],
          ),

OR

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

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 4

尝试一下

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。

Answer 5

使用MainAxisAlignment.spaceBetween

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

Answer 6

我相信原始帖子是关于删除连续的按钮之间的空格，而不是添加空格。

诀窍在于，按钮之间的最小间距是由于作为材料设计规范一部分的按钮内置的填充物所致。

因此，请勿使用按钮！但是用GestureDetector代替。此小部件类型具有onClick / onTap功能，但没有样式。

有关示例，请参见此帖子。

https://stackoverflow.com/a/56001817/766115

Answer 7

要精确确定间距，我使用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 8

只需在元素之间添加“容器（宽度：5，颜色：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,
          )
        ],
      ),
    ),

Answer 9

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

这对我有用，行内有3个小部件：Flexible，Container，Flexible

Answer 10

在文本中使用空格

Text(' '),

那应该做的。

设置行颤动中的元素之间的空间

10 个答案: