web-dev-qa-db-ja.com

Flutter GridViewフッター（無限スクロールで負荷を示すため）

私はかなりスムーズに動作するGridViewを持っています。無限スクロールのコンテキストでグリッドを使用します。スクロールが下部に近い場合は常に、REST APIを介してより多くのアイテムが読み込まれます。ここでは問題ありません。

ただし、グリッドの下部に読み込みインジケーターを表示できるようにしたいです。このウィジェットグリッド内のすべての列にまたがる必要がありますですが、スクロール可能なコンテンツの一部である必要があります。

私はFlutterに不慣れで、これを達成する方法として迷っています。

私の（動作中の）GridViewは次のようにインスタンス化されます：

return new GridView.builder(
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _COLUMN_COUNT),
  controller: widget.scrollController,
  itemCount: widget.items.length,
  itemBuilder: (BuildContext context, int index) {
    return new _ItemView(item: widget.items[index]);
  },
);
gridviewscrolldartinfinite-scrollflutter
14
Jakob Kristensen

CustomScrollViewでSliverGridをラップします。

return new CustomScrollView(slivers: <Widget>[
  new SliverGrid(
    gridDelegate: yourGridDelegate,
    delegate: yourBuilderDelegate,
  ),
  new SliverToBoxAdapter(
    child: yourFooter,
  ),
]);
14
najeira

レイアウトをどのように構築しているかはわかりませんが、考えていたものとは少し異なることはわかっていますが、これは CircularProgressIndicatorの良いユースケースのように思えます。 。

私の場合、snapshot.hasDataは常にfalseです。データが読み込まれるたびに、ProgressIndicatorがウィジェット内に最初に挿入する予定のデータに置き換えられます。

enter image description here

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("GridView Test"),
        ),
        body: new FutureBuilder(future: _getAsyncStuff(),
            builder: (BuildContext context,
                AsyncSnapshot<DataSnapshot> snapshot) {
              return new GridView.builder(
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3),
                  itemBuilder: (BuildContext context, int index) {
                    return new Card(child:
                    !snapshot.hasData ? new CircularProgressIndicator(
                      strokeWidth: 0.8,) : new Text("Snapshot data#$index")
                    );
                  });
            })

    );
  }
}
0
aziza