Flutter GridView 页脚（用于指示无限滚动的负载）

Posted 2023-02-19

【中文标题】Flutter GridView 页脚（用于指示无限滚动的负载）

【英文标题】：Flutter GridView footer (for indicating load with infinite scrolling)

【发布时间】：2018-04-10 14:44:06

【问题描述】：

我有一个运行非常流畅的 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]);
  ,
);

【参考方案1】：

通过 CustomScrollView 包裹 SliverGrid：

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

【参考方案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")
                    );
                  );
            )

    );
  

【讨论】：

这不是他想要的。他指的是在页脚中无限滚动的加载指示器。