微信交流群

老孟公众号

# FlexibleSpaceBar

AppBar的一部分,它可以扩展,折叠,延伸,最常用于SliverAppBar.flexibleSpace字段。

用法如下:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      expandedHeight: 200.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('复仇者联盟'),
        background: Image.network(
          'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
          fit: BoxFit.fitHeight,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate((content, index) {
        return Container(
          height: 65,
          color: Colors.primaries[index % Colors.primaries.length],
        );
      }, childCount: 50),
    )
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下:

FlexibleSpaceBar中有一个非常重要的属性就是stretchModes,此参数控制拉伸区域的滚动特性:

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

使用stretchModes属性需要开始stretch模式,用法如下:

SliverAppBar(
  pinned: true,
  expandedHeight: 200.0,
  stretch: true,
  flexibleSpace: FlexibleSpaceBar(
    stretchModes: [StretchMode.zoomBackground],
    ...
)
1
2
3
4
5
6
7
8

stretchModes为一个数组,3种模式可以组合使用,也可以单独使用,效果如下:

使用StretchMode.zoomBackground和StretchMode.blurBackground:

FlexibleSpaceBar(
  stretchModes: [StretchMode.zoomBackground,StretchMode.blurBackground],
  ...
)
1
2
3
4

效果如下:

我们还可以通过stretchTriggerOffsetonStretchTrigger监听拉伸事件,用法如下:

SliverAppBar(
  stretch: true,
  stretchTriggerOffset: 100,
  onStretchTrigger: (){
    print('onStretchTrigger');
  },
  ...
)
1
2
3
4
5
6
7
8

注意此属性是在SliverAppBar中设置,但拉伸超过100时,将会回调onStretchTrigger函数。