flutter CustomScrollView高性能滚动

Sliver的概念

白话：基于Sliver模型是高性能的，只有出现在可视范围内的组件才够构建，界面外的组件不构建。 官话：Flutter中提出一个Sliver（中文为“薄片”的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个“薄片”（Sliver），只有当Sliver出现在视口中时才会去构建它，这种模型也称为“基于Sliver的延迟构建模型”。 可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，CustomScrollView但是也有不支持该模型的，如SingleChildScrollView（性能很低，所有UI都会完整的绘制）。

CustomScrollView

CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。它可以包含多种滚动模型。CustomScrollView可以实现把多个彼此独立的可滑动widget组合起来，并且是高性能的。 CustomScrollView可以控制SliverListView根据需要才构建item，类似与分页加载，复用加载，数据量比较大的时候对提高加载效率非常有帮助。

CustomScrollView和SingleChildScrollView对比

CustomScrollView：高性能，懒加载，只构建屏幕可视范围内组件，超出屏幕外的组件等滑动的时候再构建，适用于子widget数据量较大的场景。 SingleChildScrollView：低性能，完整加载，直接把整个child完整的构建出来，只适用于子widget数量有限的场景。

实践

我们用CustomScrollView把“导航栏”和“瀑布流”组合在一起，并且依然保持很好的滚动性能。 CustomScrollView下使用的listview也必须是基于sliver模型的，如SliverMasonryGrid,SliverListView,SliverGridView，这样CustomScrollView可以计算listview中需要构建的items。非Sliver组件需要用SliverToBoxAdapter包起来。

伪代码：
CustomScrollView(slivers:[SliverToBoxAdapter(Container)、SliverListView])

瀑布流Demo如下：

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
    //滚动
    Widget page = CustomScrollView(
      slivers: [
          SliverToBoxAdapter(child:Container(color:Colors.red,child:Text("导航栏"))),
          //CustomScrollView是基于Sliver模型，所以需要用SliverMasonryGrid
          SliverMasonryGrid.count.count(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            childCount: 500,
            itemBuilder: (context, index) {
              return Container(color: index%2==0?Colors.blueAccent:Colors.orangeAccent,height: (130+Random().nextInt(150)).w,);
            },
          ),                
      ],

    );
    //刷新
    page = RefreshIndicator(child:page,onRefresh:() async{});

    return Scaffold(
      body: page,
      appBar: null
    );

实践效果：

image.png

image.png