【Flutter】ColumnとRowの要素の並びを逆順にする

今回はColumnRow の要素の並びを逆順にする方法を紹介します。

要素の並びを逆順にする方法には ColumnRow のプロパティを使用する方法と、Listのメソッドを使う方法の2つがあります。

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

目次

Columnの要素の並びを逆順

Column(
  verticalDirection: VerticalDirection.up,
  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,
    ),
  ],
),

Column の要素の並びを逆順にするにはverticalDirection の引数にVerticalDirection.up を渡します。

デフォルトはVerticalDirection.down です。

VerticalDirection.up

VerticalDirection.down

Rowの要素の並びを逆順

Row(
  textDirection: TextDirection.rtl,
  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,
    ),
  ].reversed.toList(),
),

Row の要素の並びを逆順にするにはtextDirection の引数にTextDirection.rtl を渡します。

デフォルトはTextDirection.ltr です。

TextDirection.rtl

TextDirection.ltr

Listのメソッドで逆順

Column([child(), child(),].reversed.toList())

Row([child(), child(),].reversed.toList())

上記コードのようにListreversed() を使用して要素の並びを逆順にできます。

一緒に読みたい

参考

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