Flutter|初探事件处理（三）

继续该系列，这一篇是实战篇，在掌握这前面几篇知识点后，相信很容易就能解决这次的需求啦~

需求背景

先看这样一组页面，分为横屏竖屏两种样式，页面元素都很好实现，主要是一个头部信息区和feed列表。重点在于吸顶效果的实现，即头部滑走后直接定住，继续滚动可以上下浏览feeds。

NestedScrollView

熟悉Flutter常用组件的一定知道用NestedScrollView就能很快就实现这个效果，它是一个可嵌套滚动组件的容器，分为 header 和 body 两部分：

header ：外部可滚动组件（outer scroll view），只能接收 Sliver，没有独立的Scrollable，滚动受外部（即NestedScrollView）Scrollable控制，称之为outer；
body ：内部可滚动组件（inner scroll view），可接收任意的可滚动组件，有自己的Scrollable，为了和外部Scrollable区分，称之为inner；

NestedScrollView主要是通过一个协调器来协调内外部可滚动组件的滚动，先滑走header再继续滑body，可以保证滚动效果连贯统一。

const NestedScrollView({
  ... 
  // 头部 Sliver构造器
  required this.headerSliverBuilder,
  // 内容 组件
  required this.body,
  this.floatHeaderSlivers = false,
})

Scrollable、Sliver

这里再多提一点上面说到的Scrollable和Sliver，这个是Flutter可滚动组件几个重要概念：

Scrollable ：处理滚动行为，滚动偏移变化时构建 Viewport（可视窗口）

Scrollable({
  ...
  this.axisDirection = AxisDirection.down, // 滚动方向
  this.controller, // 控制滚动位置，监听滚动事件
  this.physics, // 上文之前介绍过
  required this.viewportBuilder, // 构建Viewport
})

Sliver：Viewport中显示的元素，在可视时才会构建和渲染，即按需加载。常见可滚动组件及其Sliver：

因此，只要将header圈定为图中绿框的那部分就可以了。当然需求到这还没结束，来看下面这种情况如何实现。和之前不同的是，这里的背景图并非固定在背后，而是header的一部分，会随着header滚动而滚动，但header看起来并不能完全滑走，需要留有一个标题栏的高度。

方案设计

这其实违背了NestedScrollView的设计，无法在header结束滚动前就滑body，难道不能复用了吗？来想下ScrollPyhsics提到的ClampingScrollPhysics是怎么处理边界静止效果的？在计算边界条件值时，滑动值会和边界值相减得到相反的数据，也就是滑多少边界动态变化多少，使得滑动边界是相对静止的。

  @override
  double applyBoundaryConditions(ScrollMetrics position, double value) {
    if (value < position.pixels && position.pixels <= position.minScrollExtent) // underscroll
      return value - position.pixels;
    if (position.maxScrollExtent <= position.pixels && position.pixels < value) // overscroll
      return value - position.pixels;
    if (value < position.minScrollExtent && position.minScrollExtent < position.pixels) // hit top edge
      return value - position.minScrollExtent;
    if (position.pixels < position.maxScrollExtent && position.maxScrollExtent < value) // hit bottom edge
      return value - position.maxScrollExtent;
    return 0.0;
  }

参考这个思路，当header向上滚动到还剩一个标题栏的高度时（也就是吸顶边界），此时给body最上面加一个高度可动态变化的组件A，header继续滚多少A的高度就为多少，看起来body就像卡住了一样，直到header完全滑走，此时A的高度也不再变化，就可以响应body里的滑动了。

接下来就是具体实现。首先要知道header的滑动距离，一来实现标题栏背景色的透明度变化，二来计算组件A的高度，老同学NotificationListener又出现了：

ValueNotifier<double> _headerScrollDisNotifier = ValueNotifier(0);

return NotificationListener<ScrollUpdateNotification>(
  onNotification: (notification) {
    // depth=0对应header的滑动距离，depth=1对应body的滑动距离
    if (notification.depth == 0) {
      _headerScrollDisNotifier.value =
          notification.metrics.extentBefore;
    }
    return false;
  },
  child: NestedScrollView(...),
);

标题栏背景色的透明度变化很简单，注意透明度值不超过1：

ValueListenableBuilder(
  valueListenable: _headerScrollDisNotifier,
  builder: (BuildContext context, double value, Widget? child) {
    return Container(
      height: 36,
      color: Color(0xFF243648).withOpacity(min(value / 80, 1)),
    );
  },
),

然后就是关键的组件A的高度计算，reach就是header距离吸顶边界的距离，若没超过，组件A高度就是0不可见；若超过，组件A的高度就是超过的距离：

final reach = headerHieght - titleHeight;
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    ValueListenableBuilder<double>(
      valueListenable: _headerScrollDisNotifier,
      builder: (ctx, value, w) {
        final offset = reach - value;
        return SizedBox(height: offset < 0 ? -offset : 0);
      },
    ),
    body,
  ],
);

总结

如此，使用了非常简单的方法解决了问题，NestedScrollView也可以继续发挥协调滚动的能力，无需改造，在应用里多个类似场景“顶部标题 + header触顶 + feeds”都能用这个办法处理。