リファレンス

行で横方向に要素を並べる

URLをコピーする Twitterでシェアする Facebookでシェアする

Row を使って、横方向に要素を並べます。

横方向に要素を並べる

Row は横方向に要素を並べるためのウィジットです。 children に並べたい要素を配列として要素を入れていきます。

横方向の並びは mainAxisAlignment で設定することができ、

Row(
  mainAxisAlignment: MainAxisAlignment.start,  // 横方向は左に揃える
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

のように書きます。

中身の要素の指定は、 child ではなく、 children であることに注意しましょう。 <widget>[] の中に、各要素をカンマ区切りで書いていくことで指定します。

指定できる 6 種類の MainAxisAlignment の結果は、それぞれ以下の図で示されています。

MainAxisAlignment.start 左に揃える

MainAxisAlignment.center 中央に揃える

MainAxisAlignment.end 右に揃える

MainAxisAlignment.spaceAround 左右のスペースは要素間スペースの半分となるように配置する。

MainAxisAlignment.spaceBetween 左右にスペースが与えられないが、要素間は均等にスペースを与え配置する。

MainAxisAlignment.spaceEvenly すべてのスペースを均等に与え配置する。

mainAxisAlignment のデフォルトは、 MainAxisAlignment.start です。つまり、何も指定しないと左寄せに並びます。

縦方向の並び方を指定する

さらに、mainAxisAlignment で横方向の並びを操作する同時に、crossAxisAlignment で縦方向の並びを設定でき、

Row(
  mainAxisAlignment: MainAxisAlignment.center,  // 横方向は中央に揃える
  crossAxisAlignment: CrossAxisAlignment.start,  // 縦方向は上に揃える
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

のように書きます。

指定できる 3 種類の CrossAxisAlignment の結果は、それぞれ以下の図で示されています。

CrossAxisAlignment.start 上に揃える

CrossAxisAlignment.center 中央に揃える

CrossAxisAlignment.end 下に揃える

上記のよく使用される 3 種類の CrossAxisAlignment の他に、stretchbaseline もあります。 詳細はこちらのリンクを参照してください。

参考リンク