在 Row Flutter 中设置 Elements 之间的空间

Posted 2023-02-23

【中文标题】在 Row Flutter 中设置 Elements 之间的空间

【英文标题】：Set the space between Elements in Row Flutter

【发布时间】：2019-04-08 01:35:43

【问题描述】：

代码：

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

【问题讨论】：

检查，Flutter — Row/Column Cheat Sheet

你试过了吗：MainAxisAlignment.spaceAround？

添加大小框。检查这个mightytechno.com/flutter-row-widget

【参考方案1】：

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

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

在row 中，如果我们想在两个小部件之间放置空间，使其占据所有剩余空间。

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

【参考方案2】：

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

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

【讨论】：

既然你要走这条路，为什么不直接使用 SizedBox(width: 10)....

【参考方案3】：

只需在元素之间添加“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,
          )
        ],
      ),
    ),  

【参考方案4】：

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

【参考方案5】：

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

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

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

请参阅此帖子以获取示例。

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

【讨论】：

谢谢，我不敢相信他们甚至没有填充属性。我花了将近半个小时试图弄清楚这个虚构的空间！！！

【参考方案6】：

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

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

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 并给它alignment

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

【讨论】：

没有任何改变。两个FlatButtons 之间的空间是任意的，就像我的问题中的图片一样。

@marcelo.wdrb 我更新了代码，请查看。

缺少弹性 :)

感谢 Wrap，不知道！

精彩回答

【参考方案7】：

MainAxisAlignment

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

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

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

spaceBetween - 将空闲空间均匀地放置在孩子之间。

spaceAround - 将空闲空间均匀地放置在孩子之间以及第一个和最后一个孩子之前和之后的一半空间。

spaceEvenly - 在孩子之间以及第一个和最后一个孩子之前和之后均匀放置可用空间。

例子：

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

【讨论】：

我正在寻找一种解决方案，其中我的两个文本的长度都不同，所以当我将它们放在彼此靠近的中心时，它们看起来会偏离中心。

【参考方案8】：

删除空格-：

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

【讨论】：

它们是并排的，但间隔太大。

更新了答案！

没有任何改变。再次感谢您的帮助，但您的任何解决方案都不适合我。我在两个FlatButtonss 之间有这个奇怪的空间。还有其他解决方案吗？

i 使用新方法更新 - 现在之间没有空格。

感谢您的帮助。 GestureDetector 一切正常。