flutter - 如何在 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,
        ),


      ],
    ),
  ),

score 31 · Accepted Answer

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

score 11 · Accepted Answer

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

score 4 · Accepted Answer

如果您有一列包含文本，并且您希望该文本下方的两个按钮彼此相邻，则可以使用 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,
                ),
                  ],
        ),
        ),

score 4 · Accepted Answer

你只需要使用 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,
      ),
    ],
  ),
)

score 3 · Accepted Answer

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

score 1 · Accepted Answer

做这样的事情

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

score -1 · Accepted Answer

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

简单只需将 Column 更改为 row n 行到列，如下所示：

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

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

7 回答 7

Related

Reference