## CustomScrollView CustomScrollView是可以使用sliver來自定義滾動模型（效果）的widget。它可以包含多種滾動模型，舉個例子，假設有一個頁面，頂部需要一個GridView，底部需要一個ListView，而要求整個頁面的滑動效果是統一的，即它們看起來是一個整體，如果使用GridView+ListView來實現的話，就不能保證一致的滑動效果，因為它們的滾動效果是分離的，所以這時就需要一個"膠水"，把這些彼此獨立的可滾動widget（Sliver）"粘"起來，而CustomScrollView的功能就相當于“膠水”。 ### Sliver Sliver有細片、小片之意，在Flutter中，Sliver通常指具有特定滾動效果的可滾動塊。可滾動widget，如ListView、GridView等都有對應的Sliver實現如SliverList、SliverGrid等。對于大多數Sliver來說，它們和可滾動Widget最主要的區別是**Sliver不會包含Scrollable Widget，也就是說Sliver本身不包含滾動交互模型** ，正因如此，CustomScrollView才可以將多個Sliver"粘"在一起，這些Sliver共用CustomScrollView的Scrollable，最終實現統一的滑動效果。 > Sliver系列Widget比較多，我們不會一一介紹，讀者只需記住它的特點，需要時再去查看文檔即可。上面之所以說“大多數“Sliver都和可滾動Widget對應，是由于還有一些如SliverPadding、SliverAppBar等是和可滾動Widget無關的，它們主要是為了結合CustomScrollView一起使用，這是因為**CustomScrollView的子widget必須都是Sliver**。 ### 示例 ``` import 'package:flutter/material.dart'; class CustomScrollViewTestRoute extends StatelessWidget { @override Widget build(BuildContext context) { //因為本路由沒有使用Scaffold，為了讓子級Widget(如Text)使用 //Material Design 默認的樣式風格,我們使用Material作為本路由的根。 return Material( child: CustomScrollView( slivers: <Widget>[ //AppBar，包含一個導航欄 SliverAppBar( pinned: true, expandedHeight: 250.0, flexibleSpace: FlexibleSpaceBar( title: const Text('Demo'), background: Image.asset( "./images/avatar.png", fit: BoxFit.cover,), ), ), SliverPadding( padding: const EdgeInsets.all(8.0), sliver: new SliverGrid( //Grid gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, //Grid按兩列顯示 mainAxisSpacing: 10.0, crossAxisSpacing: 10.0, childAspectRatio: 4.0, ), delegate: new SliverChildBuilderDelegate( (BuildContext context, int index) { //創建子widget return new Container( alignment: Alignment.center, color: Colors.cyan[100 * (index % 9)], child: new Text('grid item $index'), ); }, childCount: 20, ), ), ), //List new SliverFixedExtentList( itemExtent: 50.0, delegate: new SliverChildBuilderDelegate( (BuildContext context, int index) { //創建列表項 return new Container( alignment: Alignment.center, color: Colors.lightBlue[100 * (index % 9)], child: new Text('list item $index'), ); }, childCount: 50 //50個列表項 ), ), ], ), ); } } ``` 代碼分為三部分： - 頭部SliverAppBar：SliverAppBar對應AppBar，兩者不同之處在于SliverAppBar可以集成到CustomScrollView。SliverAppBar可以結合FlexibleSpaceBar實現Material Design中頭部伸縮的模型，具體效果，讀者可以運行該示例查看。 - 中間的SliverGrid：它用SliverPadding包裹以給SliverGrid添加補白。SliverGrid是一個兩列，寬高比為4的網格，它有20個子widget。 - 底部SliverFixedExtentList：它是一個所有子元素高度都為50像素的列表。 運行效果：