第一百五十九回 SliverAppBar组件

最新推荐文章于 2025-02-03 21:15:00 发布

原创最新推荐文章于 2025-02-03 21:15:00 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发 #Flutter开发 #SliverAppBar #Flutter AppBar #伸缩标题

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

961 篇文章

订阅专栏

本文介绍了Flutter中的SliverAppBar组件，其可折叠/展开，常与SliverList配合。重点讲解了flexibleSpace属性的用法，通过示例代码展示了如何设置标题、背景、高度和内容显示方式。

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

概念介绍

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

使用方法

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

title属性：主要用来显示标题，和普通AppBar中的title一样；
backgroundColor属性：主要用来控制appBar的背景颜色；
collapsedHeight属性：主要用来控制AppBar关闭时的高度；
expandedHeight属性：主要用来控制AppBar展开时的高度；
flexibleSpace属性：主要用来存放AppBar展开时的内容；

上面介绍的这些属性中我重点介绍一下flexibleSpace属性,该属性是Widget类型，因此我们需要使用组件给它赋值，常用FlexibleSpace类型的组件给它赋值，该组件属于容器类组件，它本身只负责装饰，而不显示具体的内容，具体的内容在background属性对应的组件中。我们将在后面的小节中通过代码来演示它的用法。

示例代码

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