Sliver的概念

白話：基于Sliver模型是高性能的，只有出現(xiàn)在可視范圍內(nèi)的組件才夠構(gòu)建，界面外的組件不構(gòu)建。
官話：Flutter中提出一個Sliver（中文為“薄片”的意思）概念，如果一個可滾動組件支持Sliver模型，那么該滾動可以將子組件分成好多個“薄片”（Sliver），只有當Sliver出現(xiàn)在視口中時才會去構(gòu)建它，這種模型也稱為“基于Sliver的延遲構(gòu)建模型”。
可滾動組件中有很多都支持基于Sliver的延遲構(gòu)建模型，如ListView、GridView，CustomScrollView但是也有不支持該模型的，如SingleChildScrollView（性能很低，所有UI都會完整的繪制）。

CustomScrollView

CustomScrollView是可以使用Sliver來自定義滾動模型（效果）的組件。它可以包含多種滾動模型。CustomScrollView可以實現(xiàn)把多個彼此獨立的可滑動widget組合起來，并且是高性能的。
CustomScrollView可以控制SliverListView根據(jù)需要才構(gòu)建item，類似與分頁加載，復用加載，數(shù)據(jù)量比較大的時候?qū)μ岣呒虞d效率非常有幫助。

CustomScrollView和SingleChildScrollView對比

CustomScrollView：高性能，懶加載，只構(gòu)建屏幕可視范圍內(nèi)組件，超出屏幕外的組件等滑動的時候再構(gòu)建，適用于子widget數(shù)據(jù)量較大的場景。
SingleChildScrollView：低性能，完整加載，直接把整個child完整的構(gòu)建出來，只適用于子widget數(shù)量有限的場景。

實踐

我們用CustomScrollView把“導航欄”和“瀑布流”組合在一起，并且依然保持很好的滾動性能。
CustomScrollView下使用的listview也必須是基于sliver模型的，如SliverMasonryGrid,SliverListView,SliverGridView，這樣CustomScrollView可以計算listview中需要構(gòu)建的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