😊
[Flutter]Wrapウィジェットについて個人的簡単まとめ
Wrapウィジェットとは
WrapウィジェットはColumnやRowみたいに子要素を複数配置できる。
最大の特徴はWrapで囲むと「余白がなくなり次第次の列に改行してくれる」こと。
-
使い所 : childrenのwidgetが画面からはみ出してしまいそうな時
-
長所：widgetの数が増えてもレイアウトが崩れにくくなるので、複数同時に使われる
dialog buttonやchipのようなwidgetと相性が良い。
使い方
- 小要素に並べたいchildren(
children:~(プロパティ))を指定するだけ。
(RowやColumnと同じ感じで使える)
使えるプロパティ
1. direction
-
directionプロパティを使って、Columnのように縦で使うか、Rowのように横で使うかを指定できる。
2. alignment
- 主軸で子要素を配置できる
(例：alignment: WrapAlignment.end
なら、主軸の後ろ側から子要素を配置していく。(スタートラインを決める感じ))
3. runSpacing
- 行と行の余白を決めれる
4. spacing
- 要素と要素の余白を決めれる
[ひとこと]
こういうWrapすることのある要素の余白を設ける時は、一つ一つの要素の余白を作るんじゃなくて、
行間の余白と子要素間の余白を決めて主軸の方向(並べる方向を決める)のがいい。
2.3.4の例は以下
以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏
Discussion