話題のウェアラブルスピーカー開封レビューはこちら

【Flutter】RowとColumnの方向について混乱したのでイメージを整理しました

本文の内容を簡潔に言うと…

RowまたはColumnである親Widgetは、子WidgetたちをRow(横)またはColumn(縦)の方向に並べます。

それでは見ていきましょう。

お題のソースコード

以下のような記述がある場合、画面の表示はどのようになるでしょうか。

Column (
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

RowとColumnのイメージ正誤

正しいイメージ

Row:

Row(行/横)の方向に子のWidgetたちを並べていくよ

Column:

Column(列/縦)の方向に子のWidgetたちを並べていくよ

 

つまり、お題のColumnを使ったコードは.jpgの画像が縦に順番に3つ並ぶ表示となります。

間違いイメージ

× Row:

子のWidgetたちはそれぞれRow(行)だよ

× Column:

子のWidgetたちはそれぞれColumn(列)だよ

こちらは間違いですね。

「子WidgetがRow/Columnである」という勘違い

私は、はじめは間違ったほうのイメージで捉えていました。

なので、RowとColumnの表現のしかたが逆ではないのか?なぜRowが横でColumnが縦なのだろうかと混乱しました。

例えばColumnだったら、ColumnのWidgetの中でそれぞれの子たちが列として1列目2列目…となっていくのではないかと勘違いしていたのです。

この感覚、何となくわかる方がいるのではないでしょうか。

「親WidgetがRow/Columnである」が正しい捉え方

正しいのは、次に述べるような捉え方です。

RowまたはColumnの親Widgetは、Row(横)またはColumn(縦)の方向に子Widgetたちを並べます。

例えばColumnだったら、縦に順番に子が並んでいきます。

再掲

 

ちなみに、その性質上RowまたはColumnの中にはchildrenが含まれることになります。

child要素が複数→children[ ]となるのです。

Column (
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

参考情報

Flutterのlayoutに関する公式ページが大変勉強になります。

はじめからこのページを見ていればあんな勘違いをして悩むこともなかったでしょうに。

Flutter公式の精読は必須です。

参考

Layouts in FlutterFlutter

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です