[Flutter]GridView.builderを使うには?

Flutter

どうも、ちょげ(@chogetarou)です。

GridView.builderを使う方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

GridView.builderを使うには、次の3つの引数を使います。

  • gridDelegate : 設定をするための引数
  • itemCount : 要素数
  • builder : 要素の生成

この3つの引数を使うことで、GridView.builderを使うことが出来ます。

gridDelegate

引数「gridDelegate」は、GridViewの設定をするための引数です。

この引数には、次の2つのいずれかを指定します。

  • SliverGridDelegateWithFixedCrossAxisCount : カラム数を固定
  • SliverGridDelegateWithMaxCrossAxisExtent : 要素のサイズでカラム数を操作

この2つのいずれかを引数「gridDelegate」に指定し、その引数でGridViewの設定をします。

itemCount

引数「itemCount」は、GridViewの要素数を設定する引数です。

GridViewの引数「itemCount」に要素数を指定することで、GridViewが正しく表示されます。

builder

引数「builder」では、要素の生成を行います。

具体的には、要素のWidgetを返す「(context, index){}」のような関数を指定します。

スポンサーリンク

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, //カラム数
          ),
          itemCount: 9, //要素数
          itemBuilder: (context, index) {
           //要素を戻り値で返す
            return Container(
              color: index.isEven ? Colors.blue : Colors.yellow,
            );
          },
          shrinkWrap: true,
        ),
      ),
    );
  }
スポンサーリンク

まとめ

GridView.builderを使うには、次の3つの引数を指定します。

  • gridDelegate : 設定をするための引数
  • itemCount : 要素数
  • builder : 要素の生成

コメント

タイトルとURLをコピーしました