19 | 用户交互事件该如何响应？
陈航
该思维导图由 AI 生成，仅供参考
你好，我是陈航。今天，我和你分享的主题是，如何响应用户交互事件。
在前面两篇文章中，我和你一起学习了 Flutter 依赖的包管理机制。在 Flutter 中，包是包含了外部依赖的功能抽象。对于资源和工程代码依赖，我们采用包配置文件 pubspec.yaml 进行统一管理。
通过前面几个章节的学习，我们已经掌握了如何在 Flutter 中通过内部实现和外部依赖去实现自定义 UI，完善业务逻辑。但除了按钮和 ListView 这些动态的组件之外，我们还无法响应用户交互行为。那今天的分享中，我就着重与你讲述 Flutter 是如何监听和响应用户的手势操作的。
手势操作在 Flutter 中分为两类：
第一类是原始的指针事件（Pointer Event），即原生开发中常见的触摸事件，表示屏幕上触摸（或鼠标、手写笔）行为触发的位移行为；
第二类则是手势识别（Gesture Detector），表示多个原始指针事件的组合操作，如点击、双击、长按等，是指针事件的语义化封装。
接下来，我们先看一下原始的指针事件。
指针事件
指针事件表示用户交互的原始触摸数据，如手指接触屏幕 PointerDownEvent、手指在屏幕上移动 PointerMoveEvent、手指抬起 PointerUpEvent，以及触摸取消 PointerCancelEvent，这与原生系统的底层触摸事件抽象是一致的。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Flutter中手势操作的监听和响应是开发中的重要技术点。本文介绍了Flutter中手势操作的两种类型：原始的指针事件和手势识别。通过使用Listener Widget和GestureDetector，读者可以了解如何监听和响应用户的手势操作。文章还介绍了手势竞技场的概念，以及如何处理多个手势之间的冲突。总的来说，本文通过实际案例和技术原理的讲解，帮助读者深入了解Flutter中手势操作的监听和响应机制，为他们在实际开发中解决类似问题提供了指导和思路。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Flutter 核心技术与实战》，新⼈⾸单¥59
《Flutter 核心技术与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(11)
- 最新
- 精选
许童童对于一个父容器中存在按钮 FlatButton 的界面，在父容器使用 GestureDetector 监听了 onTap 事件的情况下，如果我们点击按钮，父容器的点击事件会被识别吗，为什么？ 不会被识别，因为按钮有默认的点击监听事件，监听到点击事件后，不会再向上冒泡。 如果监听的是 onDoubleTap 事件，在按钮上双击，父容器的双击事件会被识别吗，为什么？ 会被识别，因为按钮没有默认的双击监听事件。作者回复: 赞
2019-08-10241- 竹之同学前面说到指针事件有类似于浏览器一样的冒泡机制，事件会从这个最内层的组件开始，沿着组件树向根节点向上冒泡；后面又说到如果父子 widget 都用 GestureDetector 监听了同样的事件的话，只会用竞技场去响应一个，这两者是不是矛盾的？
作者回复: 注意，冒泡是指原始的指针事件，手势竞技场是针对封装后的高级手势识别
2019-08-1325 
神经蛙“使用 Listener 监听原始指针事件，并在状态改变时把信息同步给所有的手势识别器，然后这些首饰会在竞技场决定最后哪个手势来响应用户事件” 这句话意思是不是说明，处理多个手势时，响应用户事件的手势具有不确定性，最后到底哪个手势会相应无法估测？作者回复: 会根据用户交互的位置、加速度、方向等因子综合判断当前需要以哪个手势去响应，这是确定的；不确定的是如果你的交互存在二义性，而你需要识别的多个手势之间又非常相似（比如旋转和缩放），则最后到底哪个手势去响应需要综合PK一下。
2019-08-112
菜头API 没有找到 RotateGestureRecognizer作者回复: 试试ScaleGestureRecognizer
2019-11-181
zzz请问下 如何添加自定义的手势 比如连续点击三次？作者回复: 用原始指针事件监听就可以了，设定手势判定规则
2019-11-04
浣熊特工队老师，我把ListView、ExpansionTile两个结合起来用发现一个bug不知道什么原因造成的：在滑动列表的时候，展开的ExpansionTile都被折叠起来了，请问怎么解决这个问题啊。。作者回复: 看一下是不是手势有冲突
2019-10-162- Zxt请教下，如何在子wiget中向父(owner) wiget传递参数，调用方法，好比代理模式。 例如： 父wiget在build方法里在Container的child中构造了一个继承自statefulwiget的子wiget，我如何在子wiget类里调用onwer类中的方法？
作者回复: 通过让父子Widget共享controller机制实现
2019-08-282 
季申本来挺帅挺阳光的年轻人，这头像的照片拍出了50岁装嫩大叔的感觉，老气横秋啊2021-07-16- Zsc老师，比如左滑子widget处理，右滑子widget不处理，由父widget处理，这个有什么指点吗2020-11-23
- Summer与浏览器中的事件冒泡机制类似，事件会从这个最内层的组件开始，沿着组件树向根节点向上冒泡分发。 不过 Flutter 无法像浏览器冒泡那样取消或者停止事件进一步分发，我们只能通过 hitTestBehavior 去调整组件在命中测试期内应该如何表现，比如把触摸事件交给子组件，或者交给其视图层级之下的组件去响应。 这两段话有点疑问，上段话讲到事件会从最内层的组件开始，下一段话又说可以把触摸事件交给子组件开始，是不是有矛盾？2020-03-28
收起评论