flutter SliverToBox 优化

问题场景

flutter开发时使用Sliver能够构建出复杂的滚动页面, 例如这样的代码

Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverGrid(...),
      SliverToBoxAdaptar(
        child: LoadingAnimation(),
      ),
    ]);
)

这是一个需要从网络加载数据的代码, 并且是无限加载的, 使用GridView展示数据, 底部有一个加载动画.

起初我没有意识到这样做的问题, 直到有用户提出GPU占用过高的问题. 我打开Devtool, 发现在此页面内, 即使静止不动页面也在不停重复渲染. 那么一定是那个动画导致的.

为什么会这样呢, 打开api文档一看, 原来SliverToBoxAdaptar不能够懒加载, 告诉我用SliverList或者SliverGrid更好.

解决问题

如果我们显示数据使用的是SliverList, 那么就不存在这个问题, 因为只需要将动画作为最后一个list元素就可以了. 但是网格视图下将加载动画放到网格的最后一个元素显然不合适.

在网上查找了很久如何将SliverToBoxAdaptar懒加载没有结果, 这是, 我突发奇想: 构建一个SliverList, 只有两个子元素, 第一个为空的SizedBox, 第二个为加载动画.

class SliverLoadingAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList.list(
      children: [
        SizedBox(),
        LoadingAnimation(),
      ],
    );
  }
}

用它替换上面的SliverToBoxAdaptar, 问题解决