Flutter（71）：Sliver组件之SliverAppBar

Flutter教学目录持续更新中

Github源代码持续更新中

1.SliverAppBar介绍

一个Material Design App Bar，跟AppBar差不多，但是支持滚动折叠的效果
这里我们将只介绍SliverAppBar比AppBar多处的属性，基础属性将不再介绍，需要了解基础属性的可以看一下之前的文章：Flutter（11）：基础组件之AppBar

2.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宽度

3.FlexibleSpaceBar属性

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

4.CollapseMode属性

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

5.StretchMode属性

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

6.使用

  _myOnStretchTrigger() {
    ToastUtil.showToast('onStretchTrigger');
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        SliverAppBar(
          title: Text('SliverAppBar'),
          expandedHeight: 250,
          collapsedHeight: 100,
          floating: false,
          pinned: true,
          snap: false,
          stretch: true,
          stretchTriggerOffset: 100,
          onStretchTrigger: () {
            return _myOnStretchTrigger();
          },
          flexibleSpace: FlexibleSpaceBar(
            title: Text('FlexibleSpaceBar title'),
            background: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(ImageUrlConstant.imageUrl1),
                ),
              ),
              child: Center(
                child: Text(
                  'FlexibleSpaceBar background content',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            centerTitle: false,
            titlePadding: EdgeInsets.all(0),
            collapseMode: CollapseMode.parallax,
            stretchModes: [
              StretchMode.zoomBackground,
              StretchMode.blurBackground,
              StretchMode.fadeTitle,
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                height: 50,
                color: Colors.primaries[(index % 10)],
              );
            },
            childCount: 30,
          ),
        ),
      ],
    );
  }

image.png

下一节：Flutter（72）：Sliver组件之SliverList

Flutter（72）：Sliver组件之SliverList

Flutter教学目录持续更新中

Github源代码持续更新中