概要
参考文献が少ないFlutterでは、使用するWidgetがわかったとしても、そこからがちょっと手強いっていうパターンありますよね。
ということで、当時Flutte初心者であった僕が苦戦したGridViewの実装について、パラメータ単位で最低限覚えておくべきものを徹底解説していきます！
徹底解説と言っても、そこまでGridViewの実装回数を重ねてきたわけではないので、これさえ覚えておけば！というものを集めました。
こんな人に読んでほしい
- Flutter初心者の方
- GridViewの実装を検討している方
- GridViewのオーソドックスな実装を経験したことがある方
- GridViewを頻繁に実装したことがある方 ←コメントください！
実装環境
- VSCode
- AndroidStudio(エミュレータ生成のため)
- Flutter:Ver2.10.5
GridViewでの実装画面
GridViewでは、こんなUIを実装できます。
パラメータ
以下、公式より
GridView(
{Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
required SliverGridDelegate gridDelegate,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
List<Widget> children = const <Widget>[],
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
Clip clipBehavior = Clip.hardEdge,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId}
)
それでは1つずつみていきましょう！
scrollDirection
スクロールさせる方向を指定します。
これにはデフォルトでAxis.verticalが定義されているので、何も気にせずに実装すれば縦方向のスクロール機能で動作します。
Axis.vertical : 縦方向のスクロール(デフォルト)
Axis.horizontal : 横方向のスクロール
reverse
グリッド内の子要素に与えた表示順序を逆転させます。
デフォルトでfalseが定義されているため、何も気にせずに実装すればchildrenに渡した上から順に表示されます。
ここで注意が必要なのが、1要素ずつ(123...が、321...のように)逆順になるのではなく、グリッド(列または行)単位で逆順になります。
controller
GridViewのスクロールを制限する、ScrollControllerを指定します。
physics
スクロールの物理的挙動を制限します。
適宜以下の設定をすることで、スクロールを制限します。
AlwaysScrollableScrollPhysics() : 常にスクロールする
BouncingScrollPhysics() : スクロールが端まで達した時にバウンドする
ClampingScrollPhysics() : スクロールが端まで達した時に停止する
NeverScrollableScrollPhysics() : 一切スクロールしない
shrinkWrap
GridViewの子要素に合わせてサイズを縮小するかどうかを指定します。
デフォルトでfalseが入っているため、bodyに対してGridViewが渡されている場合、bodyの領域全体がスクロール可能な領域となります。
ただし、trueを指定した場合、子要素のサイズに合わせてGridViewの大きさを縮小します。
padding
GridViewの外側の余白の大きさを指定します。
gridDelegate
GridViewのレイアウトを設定します。
このパラメータはrequiredとなってるため、設定が必須です。
結論、まずはここで以下の2つの制御方法を決定し、GridViewの性質を決めることになります。
SliverGridDelegateWithFixedCrossAxisCount : このウィジェット内のパラメータcrossAxisCountに、主軸と交差する方向に幾つ要素を並べるかを指定します。
SliverGridDelegateWithMaxCrossAxisExtent : このウィジェット内のパラメータmaxCrossAxisExtentに主軸と交差する方向の子要素の最大値を指定します。子要素が親ウィジェットの領域を超える場合、次のグリッドに表示されます。
これらの性質と寄せるために、メソッドとして用意されているGridView.countとGridView.extentでも代用可能です。
メソッドについては、後の記事にまとめますね！(いつになるかはわからないけど)
children
グリッド内で表示する子要素をリストで渡します。
dragStartBehavior
GridViewのドラッグ操作のトリガーを指定します。
DragStartBehavior.start : マウスデバイス、タッチデバイスのどちらも対応。子要素のWidgetがクリック(タッチ)されたら、スクロールが開始される。(デフォルト)
DragStartBehavior.down : タッチデバイス向けの設定。子要素がタッチされたら即座にスクロールが開始される。
keyboardDismissBehavior
キーボードが表示されている時のスクロールに対して、キーボードの振る舞いを指定します。
ScrollViewKeyboardDismissBehavior.manual : スクロールを開始してもキーボードは消えない。
ScrollViewKeyboardDismissBehavior.onDrag : スクロールを開始すると、キーボードがしまわれる。
以上！！
GridViewの実装経験豊富な方、ここで紹介できなかったパラメータについて、コメント欄で解説お願いします！！