web-dev-qa-db-ja.com

行フラッターの要素間のスペースを設定する

コード：

new Container(
          alignment: FractionalOffset.center,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new FlatButton(
                child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
              ),
              new FlatButton(
                child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
                onPressed: moveToRegister,
              )
            ],
          ),
        ),

そしてここに結果があります：
https://www.dropbox.com/s/sxklyutyvbbura8/Screenshot_20181104-150928.png?dl=

2つのFlatButton要素が画面の幅の中央にスペースなしで並んでいることを修正するにはどうすればよいですか？

flutterdartflutter-layout
26
marcelo.wdrb

スペースの削除-：

new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                child: new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                onTap: () {},
              ),
              GestureDetector(
                onTap: (){},
                  child: new Text(
                'Register.',
                style: new TextStyle(
                    color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
              ))
            ],
          ),

OR

GestureDetector(
            onTap: (){},
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text('Don\'t have an account?',
                    style: new TextStyle(color: Color(0xFF2E3233))),
                new Text(
                  'Register.',
                  style: new TextStyle(
                  color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),
8
anmol.majhail

MainAxisAlignment

start-子を主軸の始点にできるだけ近づけて配置します。

enter image description here

end-子を主軸の端のできるだけ近くに配置します。

enter image description here

center-子を主軸の中央にできるだけ近づけて配置します。

enter image description here

spaceBetween-空きスペースを子の間に均等に配置します。

enter image description here

spaceAround-子の間の空きスペースと、最初と最後の子の前後のスペースの半分を均等に配置します。

enter image description here

spaceEvenly-最初の子と最後の子の前後だけでなく、子の間にも空きスペースを均等に配置します。

enter image description here

例：

  child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text('Row1'),
          Text('Row2')
        ],
      )
63
Shelly Pritchard

必要なのは、行内の項目間の少しの間隔だけであれば、スペーサーを使用できます。以下の例では、2つのテキストウィジェットを行の中央に配置します。

    widget = Row (
    children: <Widget>[
      Spacer(flex: 20),
      Text(
        "Item #1",
      ),
      Spacer(),  // Defaults to flex: 1
      Text(
        "Item #2",
      ),
      Spacer(flex: 20),
    ]
  );
9
AlanKley

MainAxisAlignment.spaceBetweenの使用

  new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Text("Left"),
      Text("Right")
    ],
  ),
4
Pablo Cegarra

元の投稿は、スペースを追加するのではなく、行内のボタン間のスペースを削除したものだと思います。

トリックは、ボタン間の最小スペースが、マテリアルデザイン仕様の一部としてボタンに組み込まれたパディングによるものだったということです。

したがって、ボタンは使用しないでください。ただし、代わりにGestureDetector。このウィジェットタイプは、onClick/onTap機能を提供しますが、スタイルはありません。

例については、この投稿を参照してください。

https://stackoverflow.com/a/56001817/766115

0
Jesse Smith