在表格视图的中央底部显示小部件

Question

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

代码段：

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,

        ),
      )
    ],
);

您可以为旋转器行为实施不同的解决方案。