从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型结构相关。

相关推荐
2501_944521594 小时前
Ramda 跨端三方库仓颉适配全流程
开发语言·javascript·flutter·php
警醒与鞭策8 小时前
Codex桌面版与Claude桌面版使用设置
android·unity·ai·性能优化
aiopencode9 小时前
局域网设备抓包怎么做?用 TraceEagle 抓电视、游戏机和 IoT 流量
后端·ios
奇牙coding10 小时前
GPT-5.5 报 401 invalid_api_key 怎么办?换密钥前按 4 层排查请求头、项目权限和端点
数据库·gpt·ios·ai
传奇开心果11 小时前
【Compose Multiplatform跨端声明式UI实用技术】第19课:多平台部署与发布
android·kotlin
红尘伴蝶舞11 小时前
加密拦截器让抓包失效,我只能从 4KB 的 logcat 碎片里拼回 JSON
android·kotlin·ai编程
booboosui11 小时前
219 个还是 0 个:读不到微信界面时,我只加不删
android
Android打工仔11 小时前
Compose 中何时该用 padding,何时该用 offset
android·android jetpack
szp200511 小时前
中文字幕烧进视频后整片空白:CoreText 低报行高,导出照样成功
ios·swift
大龄秃头程序员11 小时前
Flutter 架构里总被混淆的 IoC、DI、Service Locator,到底是什么关系?
flutter