在 Row Flutter 中设置元素之间的 space

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 元素并排没有 space 在屏幕宽度中心之间？

Answer 1

删除 Space-:

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

有很多方法可以做到，我在这里列出一些：

使用SizedBox如果你想设置一些特定的space

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

如果您希望两者尽可能远，请使用Spacer。

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

根据需要使用mainAxisAlignment：

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

用Wrap代替Row并给一些spacing

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

使用Wrap代替Row并给它对齐

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

Answer 3

主轴对齐

start - 将 children 放置在尽可能靠近主轴起点的位置。

end - 将 children 放置在尽可能靠近主轴末端的位置。

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

spaceBetween - 将空闲 space 均匀地放在 children.

之间

spaceAround - 将空闲的 space 均匀地放在 children 以及 space 的一半之间在第一个和最后一个 child.

之前和之后

space均匀 - 将空闲 space 均匀地放置在 children 之间以及第一个和最后一个 child.

示例：

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

Answer 4

如果您只想在一行中的项目之间留出一点间距，则可以使用间隔符。下面的示例将 2 个文本小部件居中放置在一行中，它们之间有一些间距。

Spacer 创建一个可调节的空 spacer，可用于调整 Flex 容器中小部件之间的间距，如 Row 或 Column。

在row中，如果我们想把space放在两个小部件之间，这样它就占据了所有剩余的space。

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

Answer 5

我相信原来的post是关于删除一行按钮之间的space，而不是添加space。

诀窍是按钮之间的最小值 space 是由于作为 material 设计规范的一部分内置在按钮中的填充。

所以，不要使用按钮！而是一个 GestureDetector。此小部件类型提供 onClick / onTap 功能但没有样式。

查看此 post 示例。

Answer 6

为了精确间距，我使用 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 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,
          )
        ],
      ),
    ),

Answer 8

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

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

在 Row Flutter 中设置元素之间的 space

Set the space between Elements in Row Flutter

dart

flutter

flutter-layout