1.概要

Flutter自带了一种效果还是挺酷的可以拉伸和收缩的AppBar，就是SliverAppBar。效果就是下拉的时候，AppBar会扩大，往上滑的时候，AppBar会收缩回去，回到顶部。

2.源码

SliverAppBar({
    Key key,
    // appbar返回按钮位置处的Widget，一般放返回按钮
    this.leading,
    // 是否由系统决定返回按钮位置处放的内容
    this.automaticallyImplyLeading = true,
    // appbar标题位置Widget，此处是Widget，所以，可以放自己想放置的Widget，不一定非要是Text
    this.title,
    // 标题右边的按钮，可以放多个
    this.actions,
    // 底部可变化区域的Widget，位于SliverAppBar的下方，一般放置背景图之类的
    this.flexibleSpace,
    // 底部控件
    this.bottom,
    // 阴影高度
    this.elevation,
    // 阴影颜色
    this.shadowColor,
    // 是否强制显示阴影，默认为false
    this.forceElevated = false,
    // 背景颜色
    this.backgroundColor,
    // 亮度，可以决定状态栏的颜色
    this.brightness,
    // icon主题
    this.iconTheme,
    // 标题右侧icon主题
    this.actionsIconTheme,
    // 文字主题
    this.textTheme,
    // 是否在状态栏下面显示
    this.primary = true,
    // 标题是否居中
    this.centerTitle,
    // 是否包含头部描述控件，默认false
    this.excludeHeaderSemantics = false,
    // 标题和左右按钮的间距，如果不想要间距，设置为0
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    // 收缩回去的高度
    this.collapsedHeight,
    // 暂开时的最大高度
    this.expandedHeight,
    // 是否往下滑动时，SliverAppBar就出现
    this.floating = false,
    // 往上滑时，是否让SliverAppBar固定在顶部被收起
    this.pinned = false,
    // 自动决定是展开还是收起状态，floating为true生效
    this.snap = false,
    // SliverAppBar是否可以继续往下拉伸适应
    this.stretch = false,
    // 触发继续往下拉事件的偏移量
    this.stretchTriggerOffset = 100.0,
    // 事件触发
    this.onStretchTrigger,
    // 是否突然出现
    this.shape,
    // toolbar高度
    this.toolbarHeight = kToolbarHeight,
    // 标题左侧内容宽度
    this.leadingWidth,
  })

3.示例

SliverAppBar需要配合CustomScrollView或者其子类使用，一般放在第一个子Widget。

Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              new SliverAppBar(
                title: Text("标题"),
                expandedHeight: 230.0,
                floating: false,
                pinned: true,
                snap: false,
              ),
              new SliverFixedExtentList(
                itemExtent: 50.0,
                delegate: new SliverChildBuilderDelegate(
                      (context, index) => new ListTile(
                    title: new Text("Item $index"),
                  ),
                  childCount: 30,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

image.png