MasonryGrid
MasonryGridウィジェットは、高さがそれぞれ異なるタイルを隙間なく敷き詰めて配置するスタガード（staggered）グリッドです。
ギャラリー形式のカード一覧のように、項目ごとに高さが異なるコンテンツを複数の列に整列するときに使用します。
備考
このウィジェットはFreeプランではロックされており、Pro・Enterpriseプランで使用できます。
定義・役割
MasonryGridウィジェットは、子項目を指定した列数（crossAxisCount）に振り分け、各タイルの高さに合わせて上から詰めて積み上げるグリッドです。通常のグリッドと違い、タイルの高さが均一でなくても空白なく埋まります。項目はデータの件数（itemCount）だけ繰り返し生成され、繰り返される子（child）を1つテンプレートとして使用します。
- カテゴリー: Layouts
- ドロップ時のサイズ: 親レイアウト（Row・Column・Stackなど）の中に入れるとデフォルトは
200 x 150、最上位（親なし）に配置するとキャンバスを埋めるように大きく表示されます。
機能
| 機能 | 説明 |
|---|---|
| スタガード配置 | タイルの高さが互いに異なっても、空白なく上から詰めて配置します。 |
| 列数の指定 | crossAxisCountで1行（交差軸）に配置する列数を決めます。 |
| 項目の繰り返し | itemCountの数だけ子項目を繰り返しレンダリングします。 |
| 間隔の調整 | mainAxisSpacing・crossAxisSpacingで縦・横のタイル間隔を調整します。 |
| スクロール設定 | スクロール方向（scrollDirection）・逆方向（reverse）・物理効果（physics）などを設定します。 |
使い方
- 左のウィジェットパレットでLayoutsカテゴリーを開きます。
- MasonryGrid項目をキャンバスにドラッグ&ドロップします。
- 右側のPropertiesパネルで
crossAxisCountに列数を指定します。 itemCountで繰り返す項目数を決め、繰り返される子ウィジェットを構成します。- 必要に応じて
mainAxisSpacing・crossAxisSpacingでタイルの間隔を調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
scrollDirection | スクロール（配置）方向 | vertical | horizontal, vertical |
reverse | 項目の配置順を反転 | オフ（false） | true / false |
controller | 接続するスクロールコントローラー | 未設定 | スクロールコントローラー |
primary | プライマリスクロールビューとして使用するか | 未設定 | true / false |
physics | スクロールの物理効果 | 未設定 | スクロール物理値 |
shrinkWrap | 内容のサイズに合わせて縮小配置 | オン（true） | true / false |
padding | グリッド内側の余白 | 未設定 | 余白の値 |
crossAxisCount | 1行（交差軸）に配置する列数 | 1 | 数値（1以上） |
mainAxisSpacing | 主軸（縦）のタイル間隔 | 0 | 数値（0以上） |
crossAxisSpacing | 交差軸（横）のタイル間隔 | 0 | 数値（0以上） |
itemCount | 繰り返し生成する項目数 | 0 | 数値 |
addAutomaticKeepAlives | 画面外の項目の状態を保持 | オン（true） | true / false |
addRepaintBoundaries | 項目ごとに再描画境界を追加 | オン（true） | true / false |
addSemanticIndexes | 項目にセマンティックインデックスを付与 | オン（true） | true / false |
cacheExtent | 先読みでレンダリングするキャッシュ領域のサイズ | 未設定 | 数値 |
semanticChildCount | セマンティックな子の数 | 未設定 | 数値 |
dragStartBehavior | ドラッグ開始の判定基準 | start | down, start |
keyboardDismissBehavior | スクロール時にキーボードを閉じる動作 | manual | manual, onDrag |
restorationId | スクロール位置を復元するID | 未設定 | 文字列 |
clipBehavior | 子のクリッピング方式 | hardEdge | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
注意・ヒント
警告
crossAxisCountは1以上に指定してください。値が大きいほど1行に配置される列が増えます。
ヒント
shrinkWrapはデフォルトがtrueのため、グリッドは内容の高さの分だけを占めます。ほかのスクロール領域の中に入れるときに便利です。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体はMasonryGrid Widget Controlドキュメントで確認してください。