web-dev-qa-db-ja.com

Flutterでボタンを並べて表示するにはどうすればよいですか？

両方のボタンを横に並べて表示したいと思います。これまでのところ、上から下までしか表示できません。

次のコードでは、何を変更する必要がありますか？

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


      ],
    ),
  ),
layoutflutter
8
666DESH666

Columnは垂直に配置されたアイテム（列）であり、Rowを探しています。 ColumnをRowに置き換えるだけで、残りのコードは問題ありません。利用可能なスペースをすべて埋めたい場合は、Expandedを使用することもできます。

12
Rene

テキストが含まれる列があり、そのテキストの下に2つのボタンが隣接するようにする場合は、ButtonTheme.barを使用できます。

以下は、Flutterの開始コードの一部です。それをスターターに接続して、動作を確認できます。

2番目の新しいテキスト（$ 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,
                ),
                  ],
        ),
        ),
3
fatcatdog
Wrap(
            children: <Widget>[
              RaisedButton(
                ...
              ),
              RaisedButton(
                ...
              ),
              RaisedButton(
                ...
              ),
            ],
          ),
1
Jansen Moscol

このようなことをしてください

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

コード内の列をその行に置き換えるだけで動作します。ここでいくつかの追加のものを追加したいのですが、列が行内にラップされていると仮定すると、ボタンを並べて表示するにはどうすればよいですか？

単純に次のように列を行n行、列に変更します。

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