メインコンテンツまでスキップ

WrapList

WrapListウィジェットは、複数のアイテムを一方向に並べ、スペースが足りなくなると次の行に折り返して配置する繰り返しレイアウトです。
サイズの異なるアイテムが多い場合に、スクロール可能なリストとして表示するのに適しています。

定義・役割

WrapListはデータリストを繰り返しレンダリングし、各アイテムを配置方向(横/縦)に並べながら、スペースが足りなくなると自動的に折り返します。maxLinesを指定すると、その行数を超えるアイテムは切り捨てられ、切り捨てられたアイテム数(overflowCount)と現在の行数(lineCount)がイベントとして通知されます。

  • カテゴリー:Layouts
  • デフォルトの配置方向:horizontal(横)
  • ドロップ時のサイズ:Row・Column・Stackなどの親レイアウトの中に入れるとデフォルトで200 x 150になり、最上位(親なし)に直接配置すると残りのスペースを埋めるように大きく表示されます。

機能

機能説明
繰り返し配置データリストの各項目を子ウィジェットとして繰り返しレンダリングします。
自動折り返しアイテムが1行に収まらない場合、自動的に次の行へ送って配置します。
間隔の調整アイテム間隔(spacing)と行間隔(runSpacing)をそれぞれ設定します。
アライメントメイン軸(alignment)・行(runAlignment)・交差軸(crossAxisAlignment)のアライメントを指定します。
行数の制限maxLinesで表示する行数を制限し、切り捨てられた(超過した)アイテム数をイベントで通知します。

使い方

  1. 左側のウィジェットパレットでLayoutsカテゴリーを開きます。
  2. WrapList項目をキャンバスにドラッグ&ドロップします。
  3. 右側のプロパティパネルで、Data Binding(またはitemCount)で繰り返すアイテム数を指定します。
  4. 内部に繰り返し表示する子ウィジェットを配置します。
  5. 必要に応じて配置方向・間隔・アライメント・maxLinesなどを調整します。

プロパティ

プロパティ説明デフォルト値値 / タイプ
directionアイテムの配置方向horizontal(横)horizontal, vertical
alignmentメイン軸方向のアイテムのアライメントstartstart, end, center, spaceBetween, spaceAround, spaceEvenly
spacing同じ行内のアイテム間の間隔(メイン軸)0数値(px)
runAlignment行(run)のアライメント(交差軸)startstart, end, center, spaceBetween, spaceAround, spaceEvenly
runSpacing行と行の間隔(交差軸)0数値(px)
crossAxisAlignment行内でのアイテムの交差軸アライメントstartstart, end, center
textDirectionメイン軸の水平方向の進行方向未設定rtl, ltr
verticalDirection行が積み上がる垂直方向downup, down
clipBehavior領域を超えた内容のクリップ方式nonenone, hardEdge, antiAlias, antiAliasWithSaveLayer
itemCount繰り返して表示するアイテム数0数値
maxLines表示する最大行数(未設定=無制限=切り捨てなし)未設定数値
reservedTrailingExtentmaxLinesが設定されている場合に、最後の行の末尾に予約するメイン軸の幅(「+N」バッジの領域など)未設定数値(px)

注意・ヒント

ヒント

maxLinesを指定しない場合(デフォルトは未設定)、行数の制限なくすべてのアイテムを表示します。このときoverflowCountlineCountは更新されません。

ヒント

繰り返すデータリストは、プロパティパネルではなく上部のData Bindingパネルで接続します。固定の個数だけが必要な場合はitemCountで指定します。

警告

overflowCountlineCountは、編集用のプロパティパネルには表示されない出力(読み取り専用)の値です。スクリプトまたはData Bindingからのみ読み取れます。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control(Property・Method・Event)の全体は、WrapList Widget Controlをご覧ください。