拆解PageView，一图搞清楚Flutter的滑动原理

通过拆解PageView，我们可以大致了解Scrollable是如何实现滑动的。

1。理解基本组件

Flutter 的滑动系统中有几个原子组件需要理解。滑动函数由这些原子组件组成。

Viewport 视口

• 视口，一个固定大小的窗口，里面有一个较大的组件
• [Viewport]是滚动控件的关键。它根据子元素的大小和给定的[ViewportOffset偏移]（这里的偏移指的是ScrollPosition）显示不同的子元素。当偏移量发生变化时，通过[Viewport]生成通知以显示不同的子元素。

ScrollPosition 扩展 ViewportOffset 滚动位置（控制器）

• 决定显示 [Viewport] 的哪一部分。值
• [像素] 确定滚动视图用于选择显示内容部分的滚动偏移量。当用户滚动视图时，该值会发生变化，从而改变显示的内容。
• [ScrollPosition] 将 [physical] 应用于滚动并存储 [minScrollExtent] 和 [maxScrollExtent]。
• 每个Scrollable对应一个唯一的ScrollPosition管理滑动信息
• 这个对象是一个[Listenable]，当[像素]改变时通知它的观察者。
• 随着时间的推移，[Scrollable] 可以拥有许多不同的 [ScrollPosition] /// 对象。例如，[Scrollable.physicals] 发生变化并且 [Scrollable] 创建了一个新的 [ScrollPosition]。原位置的状态必须迁移到新位置，子类实现[absorb]。
• keepScrollOffset： 如果重新创建此滚动位置的可滚动位置，请使用[PageStorage]保存并恢复当前滚动偏移量。

ScrollController Slide（位置控制器）

• Scroll Controller 创建一个 [ScrollPosition] 来管理特定于单个 [Scroll] 小部件的状态。要使用自定义 []，子类 [ScrollController] 将被覆盖创建ScrollPosition（避免滑动冲突解决思路） 。
• 准确的说：ScrollController并不是真正的滚动控制器。它可以管理多个ScrollPosition。控制滚动行为的实际对象是 Position。 PageView来自PageController。

ScrollPhysics 滑动物理模拟

• 滚动模拟器将用户交互处理成更接近现实世界的行为，例如手指快速滑动后出现的惯性滑动效果

总结：这些概念就是滑动。核心知识，简单来说，Flutter中的滑动可以理解为：ScrollPosition中的偏移量变化发起通知，Viewport收到通知后按照偏移量显示内部。不同的位置给用户带来列表在“滑动”的感觉。那么是谁改变了 ScrollPostion 的偏移量呢？直观上我们可以猜测与手势有关。不，下图完整地描述了Scrollable的结构。

核心照片来了！ ！ ！ ！ ！

2。 PageView的核心结构

有了上面的基本了解之后，我们就以PageView为例来整体了解一下滑动原理。

这张照片可以从几个关键部分开始

（1）PageView

可以看到，PageView改编自Scrllable，并且打包了通知从类ScrollNotification获取通知，根据通知信息的移位判断当前页面是否已切换，然后回调onPageChanged。

（2）RawGestureDetector

手势集合类，在Scrollable 的setCanDrag方法中，绑定VerticalDrag Ge sendRecognizer 或 Horizo​​ntalDragGestureRecognizer用于收集垂直或水平滑动信息。

（3）ScrollController和ScrollPosition

ScrollPosition是Scrollable中实际控制滚动的对象，在ScrollController中附加方法。 PScrollposition 添加 ScrollController 作为听众的观察者。我们经常使用ScrollController.addlistener这个方法来添加滚动监听。实际的通知顺序是： ScrollPosition->ScrollController->添加回调

(4) Viewport

接受ScrollPosition的偏移量，并绘制不同区域，防止“滑动”完成。 ？撤到Scrollable。 Scrollable 收到信息后，通过ScrollPosition进行滑动检查，包括（1）更改偏移量并通知Viewport到标志（2）报告 ScrollController，提醒观察者。

最终

本题主要以PageView为例，从宏观角度分析Scrollable的组件结构，拆解各个和各个部分的功能教导Scrollable。

作者：那由他
链接：https://juejin.cn/post/6897032698389495816
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。