Wrap
Wrapウィジェットは、子を一方向に並べていき、スペースが足りなくなると自動的に次の行（行または列）へ折り返して配置するレイアウトコンテナです。
ボタン・タグ・チップのように個数が変動する項目を、横幅に合わせて自然に流し込むときに使います。
定義・役割
Wrapウィジェットは、指定した方向（direction）に子を配置し、残りのスペースに収まらなくなると自動的に次の行へ折り返します。Row・Columnと違い、あふれた子を切り取ったり押し出したりせず、次の行へ流します。項目間の間隔（spacing）、行間の間隔（runSpacing）、配置方法をそれぞれ設定できます。
- カテゴリー: Layouts
- デフォルトの配置方向: 横（
horizontal） - デフォルトの項目間隔・行間隔:
0
機能
| 機能 | 説明 |
|---|---|
| 自動折り返し | 配置方向に子を並べ、スペースが足りなくなると次の行（行・列）へ折り返して配置します。 |
| 配置方向 | directionで、横（行が下方向に積まれる）または縦（行が横方向に積まれる）の流れを選びます。 |
| 間隔の設定 | 項目間の間隔（spacing）と行間の間隔（runSpacing）を別々に指定します。 |
| 配置の設定 | 行内の配置（alignment）、行自体の配置（runAlignment）、交差軸の配置（crossAxisAlignment）をそれぞれ調整します。 |
使い方
- 左のウィジェットパレットでLayoutsカテゴリーを開きます。
- Wrap項目をキャンバスにドラッグ＆ドロップします。
- Wrapの中に配置する子ウィジェットを入れます。
- 右のプロパティパネルで、
directionで配置方向を、spacing・runSpacingで間隔を調整します。 - 必要に応じて
alignment・runAlignment・crossAxisAlignmentで配置を整えます。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
direction | 子を並べる主方向 | horizontal | horizontal, vertical |
alignment | 1行の中での主軸方向の配置 | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
spacing | 同じ行の中の項目間の間隔 | 0 | 数値 |
runAlignment | 複数の行（run）を交差軸方向に配置 | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
runSpacing | 行と行の間の間隔 | 0 | 数値 |
crossAxisAlignment | 1行の中での交差軸方向の配置 | start | start, end, center |
textDirection | 横方向に配置するときに子が置かれる左右の向き | 未設定 | rtl, ltr |
verticalDirection | 縦方向に子・行が積まれる順序 | down | up, down |
clipBehavior | 領域からあふれた内容を切り取る方法 — 現在のバージョンでは動作しません。 | none | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
注意・ヒント
ヒント
spacingは同じ行の中の項目間の間隔、runSpacingは行と行の間の間隔で、それぞれ別のものです。両方を合わせて調整すると、項目が密集して固まりません。
注記
directionがhorizontalの場合は行が上から下へ積まれ、verticalの場合は行が左から右へ積まれます。verticalDirectionで積まれる順序を反転できます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、Wrap Widget Controlドキュメントでご確認ください。