在网格视图的中心底部显示小部件

Question

我有一个 2/3 列的网格视图，当用户滚动到最后时，我想在网格的底部中心显示一个加载指示器。添加加载指示器作为网格的最后一个元素看起来不太好，因为它没有居中。这可能吗？

代码片段：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, childAspectRatio: 480 / 315),
  controller: controller,
  itemCount: videos.length + 1,
  itemBuilder: (context, index) {
    if (index == videos.length) {
      //show loading indicator at last index
      return SpinKitThreeBounce(
               color: Colors.white,
               size: 35.0,
            );
    }
    return VideoItem(video: videos[index]);
  },
);

我拥有的：

我想要的是：

Answer 1

这也应该可以使用CustomScrollView.

https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

在这里面你可以同时使用SliverGrid和SliverList来创建你的布局。通过这种方式，您可以将微调器放入SliverList并在SliverGrid更新时隐藏它。

黄色椭圆是微调器。

这是我使用的代码：

return CustomScrollView(
    slivers: <Widget>[
      SliverGrid(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 1.0,
        ),
        delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Product(
                  product_name: listItem[index]['name'],
                  product_pic: listItem[index]['pic'],
                  product_price: listItem[index]['price'],
                  product_old: listItem[index]['old_price'],
                  );
                },
          childCount: listItem.length
        )
      ),
      SliverList(

        delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return SpinKitRotatingCircle(
                    color: Colors.amber,
                    size: 60.0,

                  );
                },
                childCount: 1,

        ),
      )
    ],
);

您可以针对微调器行为实施不同的解决方案。