设置Flutter中行中元素之间的间距。

15 浏览
0 Comments

设置Flutter中行中元素之间的间距。

代码：

new Container(
          alignment: FractionalOffset.center,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              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元素在屏幕宽度中心没有间隔地并排放置？

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

MainAxisAlignment

start - 将子项尽可能靠近主轴的起点放置。

enter image description here

end - 将子项尽可能靠近主轴的终点放置。

enter image description here

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

enter image description here

spaceBetween - 在子项之间平均分配可用空间。

enter image description here

spaceAround - 在子项之间和第一个、最后一个子项的前后空间平分。

enter image description here

spaceEvenly - 在子项之间和第一个、最后一个子项的前后空间平均分配。

enter image description here

例子：

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

0
0 Comments

有很多方法可以实现这个，我这里列出几种:

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

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

    enter image description here

  1. 如果您想让它们尽可能远离，请使用 Spacer。

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

    enter image description here

  1. 根据您的需求使用 mainAxisAlignment：

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

    enter image description here

  1. 使用 Wrap 而不是 Row 并给一些spacing

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

    enter image description here

  1. 使用 Wrap 而不是 Row 并对其进行对齐

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

    enter image description here

0