リファレンス

列で縦方向に要素を並べる

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

Column を使って、縦方向に要素を並べます。

縦方向に要素を並べる

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

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

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

のように書きます。

Columnには一つ以上の要素が入るので、child ではなく、children で要素を指定します。 <widget>[] の中に、各要素をカンマ区切りで書いていくことで指定します。

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

MainAxisAlignment.start 上に揃える

MainAxisAlignment.center 中央に揃える

MainAxisAlignment.end 下に揃える

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

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

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

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

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

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

Column(
  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 もあります。 詳細はこちらのリンクを参照してください。

参考リンク