Flutter GridView底部（用于指示无限滚动的加载）

Question

我有一个很流畅的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]);
  },
);

- Jakob Kristensen

Answer 1

使用CustomScrollView包装SliverGrid：

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

- najeira

Answer 2

我不确定你是用什么方式构建你的布局，但我知道这似乎是一个很好的使用CircularProgressIndicator的情况，虽然它与你最初想到的有些不同。

请注意，在我的情况下，它一直在加载，因为我的snapshot.hasData始终为false。当你的数据加载完成后，它将用你最初打算注入到你的小部件中的任何数据替换ProgressIndicator。

@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")
                    );
                  });
            })

    );
  }
}

- Shady Aziza

---

这不是他所询问的内容。他指的是页脚无限滚动加载指示器。 - Leoog

Answer 3

@najeira提到的是正确的，如果你仍然想保留"controller: widget.scrollController"属性，那么CustomScrollView小部件支持它：

CustomScrollView(
  controller: widget.scrollController,
  slivers: <Widget>[
      SliverGrid(
        delegate: SliverChildBuilderDelegate( (c,index){return Widget();},
                                              childCount: widget.list.length),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      )...

- Ronald Fabian Garcia