flutter组件SliverAppBar的使用方法

和AppBar差不多，不过SliverAppBar支持滚动折叠的效果。唯一不同的地方就是AppBar最大高度由父类约束，SliverAppBar 完全由自身决定。
需要注意：SliverAppBar控件需要和CustomScrollView搭配使用,SliverAppBar要通常放在slivers的第一位，后面接其他sliver控件。

效果展示：

具体案例代码：

import 'package:flutter/material.dart';

class CustomScrollViewPage extends StatefulWidget {
  const CustomScrollViewPage({Key? key}) : super(key: key);

  @override
  State<CustomScrollViewPage> createState() => _CustomScrollViewPageState();
}

class _CustomScrollViewPageState extends State<CustomScrollViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomScrollView(slivers: [
          SliverAppBar(
            pinned: true,//设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态
            expandedHeight: 420.0,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text("阿凡达2"),
              background: Image.asset(
                'images/test.jpg',
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
          SliverGrid.count(
            crossAxisCount: 4,
            children: List.generate(8, (index) {
              return Container(
                color: Colors.primaries[index % Colors.primaries.length],
                alignment: Alignment.center,
                child: Text(
                  '$index',
                  style: const TextStyle(color: Colors.white, fontSize: 20.0),
                ),
              );
            }).toList(),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return Container(
                height: 85,
                alignment: Alignment.center,
                color: Colors.primaries[index % Colors.primaries.length],
                child: Text(
                  '$index',
                  style: const TextStyle(color: Colors.white, fontSize: 20.0),
                ),
              );
            }, childCount: 25),
          )
        ]),
      ),
    );
  }
}

SliverAppBar属性：

leading：在标题前面显示的一个控件
title：标题文字
actions：功能菜单
flexibleSpace：FlexibleSpaceBar 这里就是用于实现滚动折叠的效果的地方
bottom：PreferredSizeWidget 通常用来实现Tab导航栏
elevation：阴影
shadowColor：阴影颜色
forceElevated = false：当elevation 不为 0 的时候，是否显示阴影
backgroundColor：背景色
iconTheme：icon主题
actionsIconTheme：功能菜单icon主题
textTheme：文本主题
centerTitle：标题是否居中显示
collapsedHeight：折叠高度，不设置的话会折叠到SliverAppBar高度
expandedHeight：展开高度
floating = false：true 的时候下滑先展示SliverAppBar，展示完成后才展示其他滑动组件内容
pinned = false：SliverAppBar收缩到最小高度的时候SliverAppBar是否可见，true：SliverAppBar会以折叠高度固定显示在头部，false：缩小到折叠高度后滑出页面
snap = false：snap为true，floating也要为true才会有效果。true的时候会监听你的手势结束时的动作时是下滑，那么SliverAppBar展开，上滑则是收缩折叠至上一次折叠的位置处，但是这个效果需要一个基础就是存在上一次折叠的位置，否则不生效
stretch = false：true：SliverAppBar完全展开后是否可以继续拉伸，注意这个需要外部滑动组件physics的支持（设置BouncingScrollPhysics()，滑动到标界可以继续滑动拥有回弹效果），否则是不会生效的
stretchTriggerOffset = 100.0：拉伸监听触发的偏移
onStretchTrigger：拉伸监听
shape：SliverAppBar形状
toolbarHeight = kToolbarHeight：SliverAppBar高度 默认56
leadingWidth：leading宽度

FlexibleSpaceBar属性：

title：标题
background：widget 背景
centerTitle：标题是否居中
titlePadding：标题内边距
collapseMode = CollapseMode.parallax：折叠模式
stretchModes = const <StretchMode>[StretchMode.zoomBackground]：拉伸模式

CollapseMode属性：

CollapseMode.none：背景不跟随滚动
CollapseMode.parallax：背景跟随滚动但是具有滚动视差效果
CollapseMode.pin：背景完全随着滚动

StretchMode属性：

zoomBackground：背景小部件将展开以填充额外的空间
blurBackground：使用[ImageFilter.blur]效果，背景将模糊
fadeTitle：随着用户过度滚动，FlexibleSpaceBar标题将消失