flutter事件提醒的简单介绍

25.Flutter的ListView监听滚动事件之ScrollController

对于滚动的视图，我们经常需要监听它的一些滚动事件，在监听到的时候去做对应的一些事情。

比如视图滚动到底部时，我们可能希望做上拉加载更多；

比如滚动到一定位置时显示一个回到顶部的按钮，点击回到顶部的按钮，回到顶部；

比如监听滚动什么时候开始，什么时候结束；

在Flutter中监听滚动相关的内容由两部分组成：ScrollController和ScrollNotification。

ScrollController

在Flutter中，Widget并不是最终渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常这种监听事件以及相关的信息并不能直接从Widget中获取，而是必须通过对应的Widget的Controller来实现。

ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。

另外，通常情况下，我们会根据滚动的位置来改变一些Widget的状态信息，所以ScrollController通常会和StatefulWidget一起来使用，并且会在其中控制它的初始化、监听、销毁等事件。

我们来做一个案例，当滚动到1000位置的时候，显示一个回到顶部的按钮：

jumpTo(double offset)、animateTo(double offset,...)：这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。

ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件。

相关问答

Q1: Flutter了解之手势

描述了屏幕上指针（触摸、鼠标、触控笔）的位置和移动。

Flutter中可以使用Listener(功能性组件)来监听原始触摸事件

例1

例2

例3

忽略PointerEvent

手势: 描述由一个或多个指针移动组成的语义动作，如拖动、缩放、双击等。

Material大多数widget已经对tap或手势做出了响应。 例如 IconButton和 FlatButton 响应单击，ListView响应滑动事件触发滚动。

用于手势识别的功能性组件，通过它可以来识别各种手势。

例（单击）

例（添加Material触摸水波效果 InkWell组件）

例（滑动关闭 Dismissable组件）

例（单击、双击、长按）

例（滑动）

例（扫动---单一方向）

例（缩放）

GestureRecognizer是一个抽象类。

一种手势的识别器对应一个GestureRecognizer的子类。

例

由于手势竞争最终只有一个胜出者，所以，当有多个手势识别器时，可能会产生冲突。

例

例

在APP中经常会需要一个广播机制，用以跨页面通知。比如一个需要登录的APP中，页面会关注用户登录或注销事件，来进行一些状态更新。

这时候，一个事件总线便会非常有用，事件总线通常实现了订阅者模式，订阅者模式包含发布者和订阅者两种角色，可以通过事件总线来触发事件和监听事件。

对于一些简单的应用，事件总线是足以满足业务需求的，如果决定使用状态管理包的话，一定要想清楚APP是否真的有必要使用它，防止“化简为繁”、过度设计。

例

在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。

Flutter中将这种由子向父的传递通知的机制称为通知冒泡（Notification Bubbling）。

通知冒泡和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。

通知冒泡和Web开发中浏览器事件冒泡原理是相似的，都是事件从出发源逐层向上传递，可以在上层节点任意位置来监听通知/事件，也可以终止冒泡过程，终止冒泡后，通知将不会再向上传递。

Flutter的UI框架实现中，除了在可滚动组件在滚动过程中会发出ScrollNotification之外，还有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，Flutter正是通过这种通知机制来使父元素可以在一些特定时机来做一些事情。

例

例

例

阻止冒泡

通知冒泡原理

Q2: Flutter开发 -- [12 - 监听滚动事件]

ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。

另外，通常情况下，我们会根据滚动的位置来改变一些Widget的状态信息，所以ScrollController通常会和StatefulWidget一起来使用，并且会在其中控制它的初始化、监听、销毁等事件。

我们来做一个案例，当滚动到1000位置的时候，显示一个回到顶部的按钮：

如果我们希望监听什么时候开始滚动，什么时候结束滚动，这个时候我们可以通过 NotificationListener 。

案例: 列表滚动, 并且在中间显示滚动进度