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

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

Answer 2

如果你有一个包含文字的栏目，并且你想在那个文本下方的两个按钮就在彼此旁边，你可以使用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 3

做这样的事情

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

Answer 4

puts item.reverse.join("\t:\t")

Answer 5

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

简单，只需将“列至行n”更改为“行至列”，如下所示：

          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

您只需要像这样使用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,
      ),
    ],
  ),
)

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

7 个答案: