如何创建折叠式Title

原创于 2025-02-03 22:15:00 发布 · 547 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发Flutter

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章目录

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,
    ],
  ),
),

上面的示例代码中添加了详细的注释，这样方便大家理解代码。不过依据目前的知识我们还不能演示程序的运行结果，因为还需要其它组件配合才可以运行，大家不用担心，目前只需要熟练掌握如何创建SliverAppBar组件就可以了，我们在后面章回中会使用本章回创建的组件给大家演示程序运行效果。
看官们，与"SliverAppBar组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!