高度自定义 navbar 联动动效

约 698 字大约 2 分钟

flutter

2024-08-02

SliverAppBar 控件可以实现页面头部区域展开、折叠的效果。

想更具体了解 SliverAppBar 使用，可参考 yechaoa/flutter_sliverappbar

SliverAppBar 联动效果的控制的还是比较薄弱的。在真正产品开发中，联动需求是非常奇葩的。

比如

滚动到一定高度的时候改变状态栏文字颜色
滚动的时候，实现背景色渐变：
某个元素的位置移动等等

为了深度自定义联动效果，Flutter 给你提供了 SliverPersistentHeader。

SliverPersistentHeader

Creates a sliver that varies its size when it is scrolled to the start of a viewport.

SliverAppBar 的动效其实也是基于 SliverPersistentHeader 实现的。

越底层，可操控的手段越多

SliverPersistentHeader 属性

delegate：SliverPersistentHeaderDelegate
pinned 收缩到最小高度的时候是否可见
- true：SliverPersistentHeader 会以折叠高度固定显示在头部，
- false：缩小到折叠高度后滑出页面
floating: 是否下滑的同时是否先展示

各种参数配置的效果可参考这位大佬的文章： SliverPersistentHeader 使用指南

SliverPersistentHeaderDelegate

SliverPersistentHeader 的核心就是使用 SliverPersistentHeaderDelegate，我们需要对其进行子类化，也是非常容易的：


class PersistentHeaderBuilder extends SliverPersistentHeaderDelegate {
  final double max;
  final double min;
  final Widget Function(BuildContext context, double offset, bool overlapsContent) builder;

  PersistentHeaderBuilder(
      {this.max = 120, this.min = 80, required this.builder})
      : assert(max >= min && builder != null);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return builder(context, shrinkOffset, overlapsContent);
  }

  @override
  double get maxExtent => max;

  @override
  double get minExtent => min;

  @override
  bool shouldRebuild(covariant PersistentHeaderBuilder oldDelegate) =>
      max != oldDelegate.max ||
      min != oldDelegate.min ||
      builder != oldDelegate.builder;
}

要啥都从外部传进来，非常简单的实现了一个通用的 delegete。

使用自定义的 PersistentHeaderBuilder

// ...
@override
Widget build(BuildContext context) {
    // 状态栏高度
    final navh = style.size.navBarHeight + style.size.statusBarHeight;
    return SliverPersistentHeader(
        pinned: true,
        floating: false,
        delegate: PersistentHeaderBuilder(
        min: navh,
        max: maxh,
        builder: (context, offset, overlapsContent) {
            return AnnotatedRegion<SystemUiOverlayStyle>(
                value:
                     offset > navh ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light,
                child: _buildContent(context, offset, overlapsContent),
            );
        },
        ),
    );
}

Widget _buildContent(BuildContext context, double offset, bool overlapsContent) {
    // 有了 offset 你可以做任何动效了
}