从Click理解移动端App开发

当前移动端App开发分为Native(原生)开发和Hybrid(混合)开发;

现在通过移动端App的点击事件来进行探究:

HTML

对于通过HTML构建的网页,Click作为一个事件本身与其他事件相同是浏览器窗口中发生、特定交互瞬间,成为js与DOM之间交互的桥梁;

事件流从window开始到具体的DOM tree(Document Object Model Tree)的顶层节点进行事件的捕获,在节点确定目标后再通过冒泡回溯document.addEventListener(event, function, useCapture),若不使用document.stopPropagation()进行事件拦截就会导致某事件会触发parent层级的相应事件。

微信小程序的事件机制与HTML类似。

React Native

在RN中有很多View组件,只要实现了正确的Responder方法,就可以成为触摸事件的响应者;

View.props.onStartShouldSetResponder: (evt) => true,在用户开始触摸的时候(手指刚刚接触屏幕的瞬间),是否愿意成为响应者?

View.props.onMoveShouldSetResponder: (evt) => true,如果 View 不是响应者,那么在每一个触摸点开始移动(没有停下也没有离开屏幕)时再询问一次:是否愿意响应触摸交互呢?

View.props.onResponderGrant: (evt) => {} - View,现在要开始响应触摸事件了。这也是需要做高亮的时候,使用户知道他到底点到了哪里;

View.props.onResponderReject: (evt) => {},响应者现在"另有其人"而且暂时不会"放权",请另作安排;

onStartShouldSetResponder与onMoveShouldSetResponder是以冒泡的形式调用的,即嵌套最深的节点最先调用;

这意味着当多个 View 同时在ShouldSetResponder中返回 true 时,最底层的 View 将优先"夺权";
但是有些时候,某个parent View 会希望能先成为响应者;
我们可以利用"捕获期"来解决这一需求;
响应系统在从最底层的组件开始冒泡之前,会首先执行一个"捕获期",在此期间会触发on
ShouldSetResponderCapture系列事件;

因此,如果某个parent View 想要在触摸操作开始时阻止child组件成为响应者,那就应该处理onStartShouldSetResponderCapture事件并返回 true 值;

View.props.onStartShouldSetResponderCapture: (evt) => true;

View.props.onMoveShouldSetResponderCapture: (evt) => true。

Flutter

Flutter有自己的Engine,这导致Flutter在各平台上都能很好的兼容;

Flutter Engine是基于Dart Runtime环境(UI、GPU、I/O线程,还有原生Platfrom线程),Dart Runtime会首先创建和启动DartVM虚拟机,DartIsolate会初始化并启动一个DartIsolate,启动流程的最后会执行main(),执行runApp(),获得WidgetsBinding单例对象;

其中GestureBinding负责手势处理,提供了window.onPointerDataPacket回调,绑定Framework手势子系统,是Framework事件模型与底层事件的绑定入口;

Flutter内部的组件是tree型结构,handlePointerEvent处理具体手势,通过调用GestureBinding._handlePointerEventImmediately实现,这个方法是为了进行命中测试找到可以处理事件的组件;

发起命中测试RendererBinding.hitTest(parent组件的hitTest中会调用child组件的hitTest,所以若child组件通过命中测试将会添加在parent组件前)将可以被响应的RenderObject对象添加进队列保存下来;

接下来进行事件分发GestureBinding.dispatchEvent,内部是顺序执行handleEvent;

最终保证了最顶层的通过命中测试的组件去执行对应的event。

iOS

继承了UIResponser的对象:UIApplication、UIWindow、UIViewController、UIView、UIButton、UILabel;

通过UITouch方法处理和传递UIEvent;

open func touchesBegan(_ touches: Set, with event: UIEvent?);

open func touchesMoved(_ touches: Set, with event: UIEvent?);

open func touchesEnded(_ touches: Set, with event: UIEvent?);

open func touchesCancelled(_ touches: Set, with event: UIEvent?);

当屏幕收到触摸信号,此时拥有的信息是触摸点的坐标,需要找到第一响应者来响应触摸;

系统将点击事件加入到UIApplication管理的消息队列里;

UIApplication会从消息队列中取出该事件传递给UIWindow;

在UIWindow中调用方法hitTest:withEvent:,在方法中调用pointInside:withEvent:来判断触摸点的坐标是否在UIWindow内部;

若返回YES,则倒序遍历子视图找到最终响应的子UIResponer;

若最终返回一个UIResponer,那么最终响应UIResponer并结束事件传递,如果无值返回则将UIWindow作为响应者。

Android

安卓的触摸事件(MotionEvent)也有一套响应链,层级是通过Activity到ViewGroup到View;

dispatchTouchEvent()负责将事件分发给子视图或自己处理;

onInterceptTouchEvent()只在ViewGroup中才有,用于拦截事件,决定是否传递给子视图;

onTouchEvent()负责处理事件,返回true表示消费了事件,false则相反。

当前移动端App使用的事件传递使用的是一套类似的链式结构,这与屏幕组件是tree型结构相关。

相关推荐
带电的小王1 小时前
WhisperKit: Android 端测试 Whisper -- Android手机(Qualcomm GPU)部署音频大模型
android·智能手机·whisper·qualcomm
coder_pig1 小时前
📝小记:Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
梦想平凡1 小时前
PHP 微信棋牌开发全解析:高级教程
android·数据库·oracle
元争栈道1 小时前
webview和H5来实现的android短视频(短剧)音视频播放依赖控件
android·音视频
阿甘知识库2 小时前
宝塔面板跨服务器数据同步教程:双机备份零停机
android·运维·服务器·备份·同步·宝塔面板·建站
元争栈道3 小时前
webview+H5来实现的android短视频(短剧)音视频播放依赖控件资源
android·音视频
乔峰不是张无忌3303 小时前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
捡芝麻丢西瓜3 小时前
flutter自学笔记5- dart 编码规范
flutter·dart
MuYe3 小时前
Android Hook - 动态加载so库
android
恋猫de小郭3 小时前
什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap
flutter·ios·swiftui