JPFlutterの基本レイアウトGridViewGridViewGridViewGridViewは写真などのボックス状のレイアウトを配置しスクロールするのに便利なウィジェットです。それでは細かいところを一つずつみていきましょう。GridViewを構築するためには4つの方法があります。「GridView.count」は最も一般的に使用されるグリッドレイアウトとなり、横に並べる数を固定数で指定してグリッドを表示します。グリッドを並べる表示に方法になります。「GridView.builder」で作成すると、実際に表示されている子要素のみビルダーが呼び出されるため随時読み込みなど、多数(または無限)のリストを表示する場合に利用する作成方法です。「GridView.custom」で作成すると、「SliverGridDelegate」を追加してカスタマイズでき、整列されていないまたは重ねた配置を実現できます。今回は、1~3について説明していきます。GridView.count一般的なGridViewの表示方法です。}}このようにcrossAxisCountで横に並べる件数を指定することでグリッドが並びます。GridView.extentGridView.extentはmaxCrossAxisExtentで指定した幅を最大値として、グリッドを並べる表示方法です。500pxの横幅のある「GridView」に対して、maxCrossAxisExtentを150と指定した場合、幅125pxのグリッドが4列並んだ表示となります。list)paddingで「GridView」の外周のPaddingを設定し、mainAxisSpacing、crossAxisSpacingによりグリッド間にスペースを作っています。今回のGridViewは幅400pxのため、グリッドの間の数値を引いて128pxのグリッドが3列になっている状態です。GridView.builderGridView.builderは「ListView」の時同様、表示する要素が事前にわからない場合に利用する書き方です。itemBuilderは画面表示時に実行されるため、無限にグリッドを作成することが可能です。ギャラリー、検索結果の表示などに利用すると良いかと思います。}}上記の例ではitemBuilderで画像を表示するウィジェットを作成しています。gridの件数が表示件数を上回る場合に追加で画像を生成しています。このようにすることで無限にグリッドが生成される状態になりました。SliverGridDelegateWithFixedCrossAxisCountbuilderで利用している、SliverGridDelegateWithFixedCrossAxisCountはGridView.countと同じです。crossAxisCountで横に並べる数を指定して、グリッドを作成します。})SliverGridDelegateWithMaxCrossAxisExtentbuilderでは、SliverGridDelegateWithMaxCrossAxisExtentも利用でき、GridView.extentと同じ制御が可能です。maxCrossAxisExtentで横に並べるグリッドの最大幅を指定して、グリッドを作成します。})ScrollDirection「GridView」クラスであればどれでも利用できるのですが、scrollDirectionはグリッドを並べる方向を変更するために使います。デフォルトではAxis.verticalです。})このようにスクロールする方向が変わったのがわかると思います。AxisSpacingグリッド同士の間にスペースを作成したいときに指定するのが、mainAxisSpacingとcrossAxisSpacingになります。RowやColumnでも同じ考え方が出てきましたが、以下のようなイメージで利用します。このプロパティは、「GridView」クラスであれば上記で説明したどれでも利用できます。このように並ぶ方向に対して、mainAxisSpacingとcrossAxisSpacingが決まることに注意してください。先に説明したscrollDirectionと併用する場合はスペース位置が変わりますのでお気をつけください。})このように上下に対してスペースができます。})このように左右に対してスペースができます。ChildAspectRatio今まで紹介したやり方だとGridのタテヨコ比は常に同じ割合となります。そのため縦の長さを伸ばしたい場合は、childAspectRatioで比率を変えてあげます。このプロパティは、「GridView」クラスであれば上記で説明したどれでも利用できます。