Flutter Sliver 应用栏

在 Flutter 中，SliverAppBar 是一种非常常见的应用栏实现方式，它可以与 CustomScrollView 搭配使用，实现如同天猫、京东等应用的下拉效果，让您的应用看起来更加专业化。

SliverAppBar 基本用法

SliverAppBar 需要使用在 CustomScrollView 里面，如下：

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Flutter Sliver AppBar'),
      // 可展开的高度
      expandedHeight: 250.0,
      // 是否无论向上滑动多少都滑出即将消失的状态
      floating: true,
      // 是否固定在页面顶部
      pinned: true,
      // 背景颜色
      backgroundColor: Colors.blueGrey,
      // 收缩后标题的最小高度
      // 一旦达到该高度，标题就不会继续变小了
      snap: false,
      // 右侧的操作
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.more_horiz),
          onPressed: () {},
        ),
      ],
      // 左侧的操作
      leading: IconButton(
        icon: Icon(Icons.arrow_back_ios),
        onPressed: () {},
      ),
      // 下拉时的背景
      flexibleSpace: FlexibleSpaceBar(
        background: Image.asset(
          'assets/images/logo.png',
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 其他内容（这里省略）
  ],
)

上述代码实现了一个基本的 SliverAppBar。如果想要更加详细的介绍和代码实现，可以查看 Sliver AppBar 官方文档。

SliverAppBar 的高级应用

虽然 SliverAppBar 已经能够满足大部分应用场景，但是在某些情况下，我们可能需要继续对其进行一些定制，例如增加滑动事件监听、改变状态栏颜色等。

SliverAppBar 滑动事件监听

有时候，我们需要监视 SliverAppBar 的滑动事件，例如在标题栏上添加透明效果，当页面向上滑动时将标题变为不透明。要实现此功能，我们可以通过在 CustomScrollView 上监听 ScrollUpdateNotification 事件，在回调函数中动态修改状态。

CustomScrollView(
  controller: _controller,
  slivers: <Widget>[
    SliverAppBar(
      ...
      // 滑动监听
      flexibleSpace: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: <Color>[Colors.black54, Colors.transparent],
              ),
            ),
          );
        },
      ),
    ),
    // 其他内容（这里省略）
  ],
);

  ...
  
// 监听滑动事件，动态设置透明度
_controller.addListener(() {
  double offset = _controller.offset;
  double alpha = offset / 100;
  if (alpha > 1) {
    alpha = 1;
  }
  setState(() {
    _opacity = alpha;
  });
});

上述代码实现了根据滑动位置设置透明度的效果。更多滑动事件监听的应用场景可以参考 Flutter Sliver Bar 的滑动监听。

改变状态栏颜色

默认情况下，SliverAppBar 的状态栏会与应用栏颜色保持一致。如果想要更改状态栏颜色，可以使用 SystemChrome.setSystemUIOverlayStyle 方法。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.white,
));

在实现时需要注意，需要将 SliverAppBar 的 brightness 属性设置为 Brightness.dark。

SliverAppBar(
  ...
  brightness: Brightness.dark,
);

结论

Flutter 中的 SliverAppBar 是一种非常常见的应用栏实现方式，可以使您的应用看起来更加专业化。本文首先介绍了 SliverAppBar 的基本使用方法，然后讲解了 SliverAppBar 的高级应用，包括滑动事件监听和改变状态栏颜色等。期望通过本文的介绍，能够帮助您更好地理解和使用 Flutter Sliver AppBar。