WrapList
WrapListウィジェットは、複数のアイテムを一方向に並べ、スペースが足りなくなると次の行に折り返して配置する繰り返しレイアウトです。
サイズの異なるアイテムが多い場合に、スクロール可能なリストとして表示するのに適しています。
定義・役割
WrapListはデータリストを繰り返しレンダリングし、各アイテムを配置方向(横/縦)に並べながら、スペースが足りなくなると自動的に折り返します。maxLinesを指定すると、その行数を超えるアイテムは切り捨てられ、切り捨てられたアイテム数(overflowCount)と現在の行数(lineCount)がイベントとして通知されます。
- カテゴリー:Layouts
- デフォルトの配置方向:
horizontal(横) - ドロップ時のサイズ:Row・Column・Stackなどの親レイアウトの中に入れるとデフォルトで
200 x 150になり、最上位(親なし)に直接配置すると残りのスペースを埋めるように大きく表示されます。
機能
| 機能 | 説明 |
|---|---|
| 繰り返し配置 | データリストの各項目を子ウィジェットとして繰り返しレンダリングします。 |
| 自動折り返し | アイテムが1行に収まらない場合、自動的に次の行へ送って配置します。 |
| 間隔の調整 | アイテム間隔(spacing)と行間隔(runSpacing)をそれぞれ設定します。 |
| アライメント | メイン軸(alignment)・行(runAlignment)・交差軸(crossAxisAlignment)のアライメントを指定します。 |
| 行数の制限 | maxLinesで表示する行数を制限し、切り捨てられた(超過した)アイテム数をイベントで通知します。 |
使い方
- 左側のウィジェットパレットでLayoutsカテゴリーを開きます。
- WrapList項目をキャンバスにドラッグ&ドロップします。
- 右側のプロパティパネルで、Data Binding(または
itemCount)で繰り返すアイテム数を指定します。 - 内部に繰り返し表示する子ウィジェットを配置します。
- 必要に応じて配置方向・間隔・アライメント・
maxLinesなどを調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
direction | アイテムの配置方向 | horizontal(横) | horizontal, vertical |
alignment | メイン軸方向のアイテムのアライメント | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
spacing | 同じ行内のアイテム間の間隔(メイン軸) | 0 | 数値(px) |
runAlignment | 行(run)のアライメント(交差軸) | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
runSpacing | 行と行の間隔(交差軸) | 0 | 数値(px) |
crossAxisAlignment | 行内でのアイテムの交差軸アライメント | start | start, end, center |
textDirection | メイン軸の水平方向の進行方向 | 未設定 | rtl, ltr |
verticalDirection | 行が積み上がる垂直方向 | down | up, down |
clipBehavior | 領域を超えた内容のクリップ方式 | none | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
itemCount | 繰り返して表示するアイテム数 | 0 | 数値 |
maxLines | 表示する最大行数(未設定=無制限=切り捨てなし) | 未設定 | 数値 |
reservedTrailingExtent | maxLinesが設定されている場合に、最後の行の末尾に予約するメイン軸の幅(「+N」バッジの領域など) | 未設定 | 数値(px) |
注意・ヒント
ヒント
maxLinesを指定しない場合(デフォルトは未設定)、行数の制限なくすべてのアイテムを表示します。このときoverflowCountとlineCountは更新されません。
ヒント
繰り返すデータリストは、プロパティパネルではなく上部のData Bindingパネルで接続します。固定の個数だけが必要な場合はitemCountで指定します。
警告
overflowCount・lineCountは、編集用のプロパティパネルには表示されない出力(読み取り専用)の値です。スクリプトまたはData Bindingからのみ読み取れます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control(Property・Method・Event)の全体は、WrapList Widget Controlをご覧ください。