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

相关推荐
python算法(魔法师版)30 分钟前
html,css,js的粒子效果
javascript·css·html
graceyun3 小时前
C语言进阶习题【1】指针和数组(4)——指针笔试题3
android·java·c语言
2401_897916068 小时前
Android 自定义 View _ 扭曲动效
android
天花板之恋8 小时前
Android AutoMotive --CarService
android·aaos·automotive
susu108301891111 小时前
Android Studio打包APK
android·ide·android studio
2401_8979078612 小时前
Android 存储进化:分区存储
android
kirk_wang12 小时前
Flutter调用HarmonyOS NEXT原生相机拍摄&相册选择照片视频
flutter·华为·harmonyos
浪浪山小白兔14 小时前
HTML 表单和输入标签详解
前端·html
sunly_15 小时前
Flutter:carousel_slider 横向轮播图、垂直轮播公告栏实现
flutter
星释16 小时前
鸿蒙Flutter实战:17-无痛上架审核指南
flutter·华为·harmonyos