SliverAppBar的功能和用法

文章目录

1 概念介绍
2 使用方法
3 示例代码

我们在上一章回中介绍了SliverGrid组件相关的内容，本章回中将介绍SliverAppBar组件.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

我们在本章回中介绍的SliverAppBar和普通的AppBar类似，它们的不同之处在于SliverAppBar创建的内容可以折叠和展开，因此它主要和SliverList等组件配合
使用，这样就可以创建一个滑动时折叠或者展开的标题，这样可以丰富标题的内容。本章回中将详细介绍SliverAppBar的使用方法。

2 使用方法

和其它组件一样SliverAppBar提供了相关的属性来控制自己，下面是常用的属性，掌握这些属性就可以使用SliverAppBar了。

title属性：主要用来显示标题，和普通AppBar中的title一样；
backgroundColor属性：主要用来控制appBar的背景颜色；
collapsedHeight属性：主要用来控制AppBar关闭时的高度；
expandedHeight属性：主要用来控制AppBar展开时的高度；
flexibleSpace属性：主要用来存放AppBar展开时的内容；
上面介绍的这些属性中我重点介绍一下flexibleSpace属性,该属性是Widget类型，因此我们需要使用组件给它赋值，常用FlexibleSpace类型的组件给它赋值，该
组件属于容器类组件，它本身只负责装饰，而不显示具体的内容，具体的内容在background属性对应的组件中。我们将在后面的小节中通过代码来演示它的用法。

3 示例代码

SliverAppBar(title: const Text('Title of SliverAppBar'),backgroundColor: Colors.purpleAccent,///关闭和展开时的高度collapsedHeight: 60,expandedHeight: 300,///下滑屏幕时先显示appBar下面的内容，后显示appBar中的内容，默认值为false表示此情况///设置为true时,下滑屏幕时先显示appBar中的内容，后显示appBar下面的内容;floating: true,///向上拖动屏幕，下面的内容向上滚动，appBar逐渐缩小，最后是否显示appBar,默认是56高度的appBar///默认值为false,表示不显示pinned: true,///appBar空间扩展后显示的内容flexibleSpace: FlexibleSpaceBar(///这个title在appBar的最下方,可以不设定，缩小后它会和SliverAppBar的title重合title: const Text('title of FlexibleSpaceBar'),background: Container(decoration: const BoxDecoration(image:DecorationImage(opacity: 0.8,// colorFilter: ColorFilter.mode(Color.fromARGB(100, 200, 20,30),BlendMode.difference),image: AssetImage("images/ex.png"),fit: BoxFit.fill,),),///扩展空间中主要显示的内容child: const Center(child: Text('child of container')),),centerTitle: true,///拉伸和折叠时的样式，效果不是很明显collapseMode: CollapseMode.pin,stretchModes: const [StretchMode.zoomBackground,StretchMode.blurBackground,StretchMode.fadeTitle,],),
),