【Flutter】MainAxisAlignmentとCrossAxisAlignmentの使い方

今回はMainAxisAlignmentCrossAxisAlignmentの使い方を紹介します。

MainAxisAlignmentCrossAxisAlignmentColumnRow などで複数の要素の配置方法を指定する際に使用します。

\ 世界最大級のオンライン学習サービス /

目次

MainAxisAlignmentの使い方

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
  ],
),
Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
  ],
),

mainAxisAlignment の引数にMainAxisAlignment を渡してメイン軸の要素の配置を指定できます。デフォルトはMainAxisAlignment.start です。

Columnの場合は垂直方向、Row の場合は水平方向がメイン軸となります。

MainAxisAlignment.start(デフォルト)

VerticalDirection.downの場合

TextDirection.ltrの場合

MainAxisAlignment.start では要素と要素の間に余白を作らず要素を配置します。

要素を並べる開始位置はColumn ならverticalDirectionRow ならtextDirection で指定した方向に順に要素を並べていきます。

MainAxisAlignment.end

VerticalDirection.downの場合

TextDirection.ltrの場合

MainAxisAlignment.end では要素と要素の間に余白を作らず要素を配置します。

要素を並べる開始位置はColumn ならverticalDirectionRow ならtextDirection で指定した方向とは逆順に要素を並べていきます。

MainAxisAlignment.Center

MainAxisAlignment.center では要素と要素の間に余白を作らず要素を中央に配置します。

MainAxisAlignment.spaceBetween

MainAxisAlignment.spaceBetween では要素と要素の間に均等の余白をつくります。(外側に余白を作らない)

MainAxisAlignment.spaceEvenly

MainAxisAlignment.spaceEvenly では要素と要素の間に均等の余白をつくります。(外側にも余白をつくる)

MainAxisAlignment.spaceAround

MainAxisAlignment.spaceAround では全ての要素の両サイドに均等の余白をつくります。(外側にも余白をつくる)

CrossAxisAlignmentの使い方

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    SizedBox(width: double.infinity),
    Container(
      height: 100,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
  ],
),
Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    SizedBox(height: double.infinity),
    Container(
      height: 100,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
  ],
),

CrossAxisAlignment はクロス軸の要素の配置方法を指定し、crossAxisAlignment の引数として使用します。デフォルトはMainAxisAlignment.center です。

Columnの場合は水平方向、Row の場合は垂直方向がクロス軸となります。

CrossAxisAlignment.center

CrossAxisAlignment.start では中央に要素を配置します。

CrossAxisAlignment.start

TextDirection.ltrの場合

VerticalDirection.downの場合

CrossAxisAlignment.start ではColumn ならtextDirectionRow ならverticalDirectionで指定した方向に順に要素を並べていきます。

CrossAxisAlignment.end

TextDirection.ltrの場合

VerticalDirection.downの場合

CrossAxisAlignment.end ではColumn ならtextDirectionRow ならverticalDirectionで指定した方向に順に要素を並べていきます。

CrossAxisAlignment.stretch

CrossAxisAlignment.stretch では親Widgetが許す範囲いっぱいまで要素が広がります。

一緒に読みたい

参考

  • URLをコピーしました!
目次