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

Question

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

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

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


      ],
    ),
  ),

Answer 1

Column 用于垂直排列的项目（因此是一列），您正在寻找 Row。只需将 Column 替换为 Row，其余代码就可以了。如果要填充所有可用的 space.

，也可以使用 Expanded

Answer 2

做这样的事情

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

Answer 7

你只需要使用行而不是列，就像这样

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

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

How can I display buttons side-by-side in Flutter?

layout

dart

flutter

flutter-layout

flutter-widget