Flutter - 一个易用且功能强大的粘性头部组件库，适用于任何支持滚动的组件（四）

原创已于 2022-10-30 23:21:27 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#flutter #android #ios

于 2022-10-06 00:00:20 首次发布

Flutter 同时被 2 个专栏收录

20 篇文章

订阅专栏

easy_sticky_header

5 篇文章

订阅专栏

本文介绍了一种改进的计算头部组件相对滚动组件偏移量的方法，该方法减少了计算量并避免了NaN值的出现，提高了Flutter应用中粘性头部组件的性能。

文章目录

前言
项目地址
性能优化
总结
最后
系列文章

前言

上篇文章讲了通过修正偏移量来解决粘性头部切换过程中偶尔会有空隙的问题，写上篇文章的过程中，我发现我走了弯路，所以现在换另一种方式来计算头部组件相对滚动组件的偏移量，这种方式计算量更少。

项目地址

性能优化

上篇文章中出现的偏移量关系图：

screenshot1

从图中我们可以看到，Header #3的pixels减去currentPixels就是Header #3的offset，完全不需要先通过localToGlobal方法获取offset后再去修正，直接一步到位。这叫什么，这叫厂家直销，拒绝中间商赚差价👏！

原先获取offset的源码：

Offset get _offset {
  var renderObject = _controller?.scrollPosition?.context.notificationContext
      ?.findRenderObject();
  var offset = Offset.zero;
  if (renderObject?.attached ?? false) {
    offset = localToGlobal(Offset.zero, ancestor: renderObject);
  }
  return offset;
}

优化后获取offset的源码：

Offset get _offset {
  var controller = _controller;
  if (controller != null) {
    var d = _pixels - controller.currentPixels;
    return Offset(0.0, d);
  }
  return Offset.zero;
}

这种方式获取offset不止减少了计算量，还避免了NaN（Not-a-Number）的出现。动态构建的粘性头部要求不可见后状态不能被销毁（详见StickyContainerBuilder和ParentStickyContainerBuilder），这就导致localToGlobal获取的值是NaN，至于为什么会是NaN，感兴趣的可以去翻翻Flutter的源码和注释，里面有说明，这里就不再赘述。