【Flutter】可滾動組件之CustomScrollView

前言

CustomScrollView是可以使用Sliver來自定義滾動模型（效果）的組件。它可以包含多種滾動模型，舉個例子，假設有一個頁面，頂部需要一個GridView，底部需要一個ListView，而要求整個頁面的滑動效果是統一的，即它們看起來是一個整體。如果使用GridView+ListView來實現的話，就不能保證一致的滑動效果，因為它們的滾動效果是分離的，所以這時就需要一個"膠水"，把這些彼此獨立的可滾動組件"粘"起來，而CustomScrollView的功能就相當於“膠水”。

接口描述

const CustomScrollView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    Key center,
    double anchor = 0.0,
    double cacheExtent,
    this.slivers = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  })

const SliverAppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.forceElevated = false,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.expandedHeight,
    this.floating = false,
    this.pinned = false,
    this.snap = false,
    this.shape,
  })

代碼示例

// CustomScrollView


import 'package:flutter/material.dart';

class CustomScrollViewTest extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    // 因為本路由沒有使用Scaffold，為了讓子級Widget(如Text)使用
    // Material Design 默認的樣式風格，我們使用Material作為本路由的根。
    return Material(
      child: CustomScrollView(
        slivers: <Widget>[
          // 類似AppBar，包括一個導航欄，兩者不同之處在於SliverAppBar可以集成到CustomScrollView。
          // SliverAppBar可以結合FlexibleSpaceBar實現Material Design中頭部伸縮的模型。
          SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text('Demo'),
              background: Image.asset('assets/images/avatar.png', fit: BoxFit.cover,),
            ),
          ),

          // 用SliverPadding包裹以給SliverGrid添加補白。SliverGrid是一個兩列，寬高比為4的網格，它有20個子組件。
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                // Grid按兩列顯示
                crossAxisCount: 2,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate((BuildContext context, int index){
                // 創建子widget
                return Container(
                  alignment: Alignment.center,
                  color: Colors.cyan[100*(index%9)],
                  child: Text('grid item $index'),
                );
              },
                childCount: 20,
              ),
            ),
          ),

          // 是一個所有子元素高度都為50像素的列表
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate((BuildContext context, int index){
              // 創建列表項
              return Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100*(index%9)],
                child: Text('list item $index'),
              );
            },
              // 50個列表項
              childCount: 50,
            ),
          )
        ],
      ),
    );
  }
}

總結

• 頭部SliverAppBar：SliverAppBar對應AppBar，兩者不同之處在於SliverAppBar可以集成到CustomScrollView。SliverAppBar可以結合FlexibleSpaceBar實現Material Design中頭部伸縮的模型，具體效果。
• 中間的SliverGrid：它用SliverPadding包裹以給SliverGrid添加補白。SliverGrid是一個兩列，寬高比為4的網格，它有20個子組件。
• 底部SliverFixedExtentList：它是一個所有子元素高度都為50像素的列表。