GridView
GridViewウィジェットは、項目を格子（グリッド）状に配置して表示するスクロール可能なリストウィジェットです。
同じサイズのセルを複数の列に繰り返し配置するときに使います。
定義・役割
GridViewウィジェットは、1つの項目テンプレートを繰り返して格子状に描画するイテレーター（iterator）ウィジェットです。セルは均一なサイズで配置され、1行に入れるセル数、またはセル1つの最大サイズを基準に列数を決められます。スクロール方向・間隔・セル比率なども設定できます。
- カテゴリー: Layouts
- ドロップ時のサイズ: 親レイアウト（Row・Column・Stackなど）の中に入れるとデフォルトで
300 x 200、親なしで最上位に配置するとキャンバスを埋めるように大きく表示されます。
機能
| 機能 | 説明 |
|---|---|
| 格子配置 | 項目を複数の列の格子状に配置します。列数の決定方法はcrossAxisTypeで選びます。 |
| 列数・セルサイズ | crossAxisTypeがcountなら1行のセル数（crossAxisCount）、extentならセルの最大サイズ（maxCrossAxisExtent）で列数が決まります。 |
| 間隔・比率 | 主軸・交差軸のセル間隔（mainAxisSpacing・crossAxisSpacing）とセルの縦横比（childAspectRatio）を調整します。 |
| スクロール | スクロール方向（scrollDirection）・逆方向（reverse）・物理効果（physics）などを設定します。 |
| スクリプト制御 | 項目の追加・削除、特定の項目へのスクロール、選択イベントの処理などをスクリプトで扱えます。 |
使い方
- 左のウィジェットパレットでLayoutsカテゴリーを開きます。
- GridView項目をキャンバスにドラッグ＆ドロップします。
- 右のPropertiesパネルで
crossAxisTypeを選び、countならcrossAxisCount（1行のセル数）、extentならmaxCrossAxisExtent（セルの最大サイズ）を設定します。 childAspectRatio・mainAxisSpacing・crossAxisSpacingでセルの比率と間隔を調整します。- 繰り返して表示する項目テンプレートをGridViewの中に配置します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値・タイプ |
|---|---|---|---|
crossAxisType | 列数の決定方法（セル数基準／セルの最大サイズ基準） | count | count, extent |
crossAxisCount | 1行に配置するセル数（crossAxisTypeがcountのときに使用） | 2 | 数値（整数、最小1） |
maxCrossAxisExtent | セル1つの最大交差軸サイズ（crossAxisTypeがextentのときに使用） | 100 | 数値 |
scrollDirection | スクロール方向 | vertical | horizontal, vertical |
reverse | スクロール方向を反転するか | false | 真／偽 |
controller | スクロールコントローラー | 未設定 | スクロールコントローラー |
primary | 既定のスクロールビューを使用するか | 未設定 | 真／偽 |
physics | スクロールの物理効果 | 未設定 | bouncing, clamping, alwaysScrollable, rangeMaintaining, neverScrollable, page |
shrinkWrap | コンテンツのサイズに合わせて縮小するか | true | 真／偽 |
padding | 内側の余白 | 未設定 | 余白の値 |
mainAxisSpacing | 主軸（スクロール方向）のセル間隔 | 0 | 数値（最小0） |
crossAxisSpacing | 交差軸のセル間隔 | 0 | 数値（最小0） |
childAspectRatio | セルの縦横比 | 2 | 数値（最小0.1） |
addAutomaticKeepAlives | 画面外に出た項目の状態を維持するか | true | 真／偽 |
addRepaintBoundaries | リペイント境界を追加するか | true | 真／偽 |
addSemanticIndexes | セマンティックインデックスを追加するか | true | 真／偽 |
cacheExtent | 先に描画しておくキャッシュ領域のサイズ | 未設定 | 数値 |
semanticChildCount | セマンティックな子の数 | 未設定 | 数値（整数） |
dragStartBehavior | ドラッグ開始の判定動作 | start | down, start |
keyboardDismissBehavior | スクロール時にキーボードを閉じる動作 | manual | manual, onDrag |
restorationId | スクロール位置を復元するためのID | 未設定 | 文字列 |
clipBehavior | 領域外のクリップ処理方式 | hardEdge | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
itemCount | 繰り返して描画する項目数 | 0 | 数値（整数） |
注意・ヒント
ヒント
crossAxisTypeをcountにするとcrossAxisCountが、extentにするとmaxCrossAxisExtentが列数の決定に使われます。編集画面でcrossAxisTypeを変更すると、使われない側のプロパティは自動的に非表示になります。
警告
controllerを指定しながらprimaryを真にすると、両方を同時に使えないためエラーとして扱われます。どちらか一方だけを使ってください。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、GridView Widget Controlのドキュメントで確認してください。