Sliver综合使用

文章目录

• 概念介绍
• 使用方法
• 示例代码

概念介绍

我们在前面的章回中介绍了各种Sliver相关的组件：SliverList,SliverGrid，SliverAppBar和SliverPadding，本章回将综合使用它们。下面是示例程序的
运行效果图。不过在使用之前还需要介绍一个新组件：CustomScrollView。该组件相当于一个粘合剂，它可以把各个Sliver组件组合在一起。010slivers

使用方法

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

• scrollDirection属性：主要用来控制列表中滚动方向；
• controller属性：主要用来控制某个列表的位置；
• slivers属性：主要用来存放Sliver相关的组件，它的用法类似Column组件中的children属性；
  介绍完这些常用属性后，我们将在后面的小节中通过具体的示例代码来演示它的使用方法。

示例代码

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('Title of SliverAppBar'),
      backgroundColor: Colors.purpleAccent,
      ///关闭和展开时的高度
      collapsedHeight: 60,
      expandedHeight: 300,

      ///appBar空间扩展后显示的内容
      flexibleSpace: FlexibleSpaceBar(
        ///这个title在appBar的最下方,可以不设定，缩小后它会和SliverAppBar的title重合
        title: const Text('title of FlexibleSpaceBar'),
        background: Container(
          decoration: const BoxDecoration(
            image:DecorationImage(
              opacity: 0.8,
              image: AssetImage("images/ex.png"),
              fit: BoxFit.fill,
            ),
          ),
          ///扩展空间中主要显示的内容
          child: const Center(child: Text('child of container')),
        ),
        centerTitle: true,
        ///拉伸和折叠时的样式，效果不是很明显
        collapseMode: CollapseMode.pin,
        stretchModes: