如何在 Flutter 中并排显示按钮？答案

【问题标题】：How can I display buttons side-by-side in Flutter?如何在 Flutter 中并排显示按钮？
【发布时间】：2018-08-23 02:24:21
【问题描述】：

我想水平显示两个按钮。到目前为止，我只能从上到下显示它们。

使用以下代码，我需要更改什么？

new Container(
    child: new Column(

      children: <Widget>[

      new RaisedButton(
        child: new Text("LogIn"),
        color:  Colors.blueAccent[600],
        onPressed: null,
        ),


      new RaisedButton(
        child: new Text("SignUp"),
        color:  Colors.blueAccent[600],
        onPressed: null,
        ),


      ],
    ),
  ),

【问题讨论】：

不清楚。您可以编辑您的问题以添加更多详细信息吗？

标签： flutter dart layout flutter-layout flutter-widget

【解决方案1】：

Column 用于垂直排列的项目（因此是一列），您正在寻找Row。只需将Column 替换为Row，其余代码都可以。如果您想填满所有可用空间，也可以使用Expanded。

【讨论】：

我连续有 7 个按钮。根据移动设备的可用宽度，一行只能有 2-3 个按钮。请建议我如何自动将多个按钮包装成一行？谢谢。
@Kamlesh 对我来说听起来像是一个网格视图：flutter.dev/docs/cookbook/lists/grid-lists

【解决方案2】：

Wrap(
            children: <Widget>[
              RaisedButton(
                ...
              ),
              RaisedButton(
                ...
              ),
              RaisedButton(
                ...
              ),
            ],
          ),

【讨论】：

我连续有 7 个按钮。根据移动设备的可用宽度，一行只能有 2-3 个按钮。 “包装”解决了我的问题。谢谢。
Wrap 具有对齐属性，但它不能使用完整的宽度然后包装所有按钮对齐中心。这对我来说是个大问题。仍在寻找另一种解决方案。谢谢。

【解决方案3】：

如果您有一个包含文本的列，并且您希望该文本下方的两个按钮彼此相邻，您可以使用 ButtonTheme.bar

下面是一些 Flutter 的起始代码。您可以将其插入启动器以查看它的运行情况：

只需将其粘贴在第二个新文本之后（其中包含 $counter 的那个）

        new ButtonTheme.bar(
        child: new ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
                new RaisedButton(
                  onPressed: _incrementCounter,
                  child: new Icon(Icons.add),
                  color: Colors.green,
                ),
                new RaisedButton(
                  onPressed: _decrementCounter,
                  child: new Icon(Icons.remove),
                  color: Colors.red,
                ),
                  ],
        ),
        ),

【讨论】：

我连续有 7 个按钮。根据移动设备的可用宽度，一行只能有 2-3 个按钮。请建议我如何自动将多个按钮包装成一行？谢谢。

【解决方案4】：

你只需要使用 Row 而不是 Column，就像这样

Center(
  child:  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      RaisedButton(
        child: Text("LogIn"),
        onPressed: null,
      ),
      SizedBox(width: 5),
      RaisedButton(
        child: Text("SignUp"),
        onPressed: null,
      ),
    ],
  ),
)

【讨论】：

【解决方案5】：

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Rahul Srivastava",
            ),
            Text(
              "Varanasi, India",
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(
                    onPressed: () {
                      var player = AudioCache();
                      player.play('abc.mp3');
                    },
                    child: Text('Play')),
                FlatButton(
                    onPressed: () {
                      var player = AudioCache();
                      player.play('abc.mp3');
                    },
                    child: Text('Pause')),
              ],
            )
          ],
        ),

【讨论】：

【解决方案6】：

做这样的事情

new Column(children: <Widget>[
          new Button(
            ...
            ...
          ),
          new Button(
            ...
            ...
          )
])

【讨论】：

【解决方案7】：

只需在代码中将 Column 替换为该行即可。虽然我想在这里添加一些额外的东西，假设您将 Column 包裹在一行中，那么您将如何实现并排显示按钮？

简单的只需将 Column 更改为 row n row to column 如下：

          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    child: ...
                  ),
                    child: ..                  
                  ),
                    child: ..
                  )
                ],
              ),

【讨论】：

语法无效...