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

我就是我 2024-05-24 21:42 90阅读 0赞

#### 文章目录 ####

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

--------------------

## 前言 ##

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

## 项目地址 ##

*  [Pub][]
 *  [Pub 国内镜像][Pub 1]
 *  [GitHub][]

## 性能优化 ##

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

![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的源码和注释，里面有说明，这里就不再赘述。

## 总结 ##

性能优化的改动已经发布到[Pub][Pub 1]，欢迎更新到最新版本后体验。[下一篇文章][Link 2]讲讲粘性头部无法像头部组件一样滑动的问题，如果你有兴趣了解的话，欢迎查看后续文章。

## 最后 ##

如果这个项目对你有所帮助，点赞?加星?安排一下～

如果你发现了bug或想要新功能，欢迎在[issue][]留言讨论，同时也欢迎你加入到这个项目中，为这项目出一份力。

--------------------

## 系列文章 ##

[Flutter - 一个易用且功能强大的粘性头部组件库，适用于任何支持滚动的组件（一）][Flutter -]  
[Flutter - 一个易用且功能强大的粘性头部组件库，适用于任何支持滚动的组件（二）][Flutter - 1]  
[Flutter - 一个易用且功能强大的粘性头部组件库，适用于任何支持滚动的组件（三）][Link 1]  
[Flutter - 一个易用且功能强大的粘性头部组件库，适用于任何支持滚动的组件（四）][Flutter - 2]  
[Flutter - 一个易用且功能强大的粘性头部组件库，适用于任何支持滚动的组件（五）][Link 2]

[Link 1]: https://blog.csdn.net/crasowas/article/details/127040750
[Pub]: https://pub.dev/packages/easy_sticky_header
[Pub 1]: https://pub.flutter-io.cn/packages/easy_sticky_header
[GitHub]: https://github.com/crasowas/easy_sticky_header
[screenshot1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/a16606141d594d85a49917ae15b24ae0.jpeg
[Link 2]: https://blog.csdn.net/crasowas/article/details/127523056
[issue]: https://github.com/crasowas/easy_sticky_header/issues
[Flutter -]: https://blog.csdn.net/crasowas/article/details/126838153
[Flutter - 1]: https://blog.csdn.net/crasowas/article/details/126884577
[Flutter - 2]: https://blog.csdn.net/crasowas/article/details/127166278