Flutter 触摸事件的处理点在 GestureBinding中。...在 GestureBinding 中存在一个 handlerPointerEvent方法，这个方法就是触摸事件在 Flutter 侧的触发点。...Flutter 会通过这个 test 去判断手势事件具体是交给谁处理。...总结 最后总结一下 ，Flutter 触摸事件的处理分为两部分。 利用hittets收集组件。 分发事件，使用GestureArenaManager筛选事件的具体处理者。...到这里 Flutter 的触摸事件就清楚了，我们可以了解一些基本的事件处理机制，来解决开发中的一些疑惑。
前言 任何View都有触摸事件,经常在自定义控件时重写setOnTouchListener 本篇通过手绘图片来讲述这个知识点，下面话不多说了，来一起看看详细的介绍吧 本篇分为三个等级：一览图： 直线...LEVEL1:基础实现 在Activity中通过一个全屏的Bitmap创建的Canvas绘制 为ImageView添加触摸事件监听。...mPaint.setStrokeWidth(10); mPaint.setColor(Color.RED); //将bitmap用ImageView展示 mIdIvShow.setImageBitmap(bitmap); 3.监听事件
前言 有时候我们需要在页面渲染完成后做一些操作，那么flutter中如何监听渲染完成，用addPostFrameCallback即可，如下： @override void initState()...也就是说如何重新渲染不会再次调用，如果需要则必须重新添加。...，也就是说是理论上是帧开始（这个也在后面细说），并且与addPostFrameCallback不同，它是持续，一旦注册就会一直接受事件。...而addPostFrameCallback是在它之后执行的，这时候帧渲染已经执行完成，所以是帧结束事件。...PersistentFrameCallback时机 但是为什么很多文章将addPersistentFrameCallback也定性为帧的结束事件？
最近在复习Flutter的GestureDetector相关知识时，想到了以前用Android实现的展物项目，这次完整的用Flutter实现了一下，真是感觉代码简洁了很多， 项目整体需求 进入app时展物自动顺时针旋转...触摸展物时停止旋转 手势在展物上左右触摸滑动时展物跟随旋转 离开触摸时记录触摸方向然后继续自动旋转 可以顺时针，也可以逆时针旋转 旋转的原理 首先我们了解一下怎么让展物旋转起来，展物是一件在博物馆展示的文物...GestureDetector基本使用 接下来就是如何与手势结合起来了，通过一个例子，我们先来了解一下GestureDetector的基本用法，代码如下： import 'package:flutter...opName = text; }); print(_opName); } } 复制代码 通过这个例子，我们可以在屏幕上的Text区域记录并显示出经过GestureDetector手势事件...在本例中，我们需要用到的就是onTap，onPanStart，onPanUpdate，onPanEnd这几个回调方法，经过实践并对代码加入手势事件之后，代码如下： GestureDetector(
2.1、触摸事件 默认情况下， PlatformViews 是没办法接收触摸事件。...用户产生的触摸事件是直接发送到 Flutter View 中，而不是他们实际点击的 AndroidView。...类似可见：《Flutter完整开发实战详解(十三、全面深入触摸和滑动原理)》 当触摸成功时会向 Android embedding 发送一条消息，其中包含 touch 事件的详细信息。...在 Android embedding 中，该事件的坐标最后会匹配到 AndroidView 在 VirtualDisplay 中的坐标，然后会创建一个 MotionEvent 用于 描述触摸的新控件，...在代理线程中，返回 Flutter View 以创建输入。。 WebView 失去焦点时，将输入连接重置回 Flutter 线程。这样可以防止文本输入“卡”在 WebView 内。
，事件被AbsorbPointer消费掉，会导致背景后的页面无法获取到触摸事件；IgnorePointer本身无法消费触摸事件，又由于IgnorePointer和AbsorbPointer都具有屏蔽子Widget...获取触摸事件的作用，这个貌似靠谱，这里试了，可以和背景后面的页面互动！...但是又存在一个十分坑的问题 因为使用IgnorePointer屏蔽子控件的触摸事件，而IgnorePointer本身又不消耗触摸事件，会导致无法获取到背景的点击事件！...，这里了解下behavior的几种属性 deferToChild：仅当一个孩子被命中测试击中时，屈服于其孩子的目标才会在其范围内接收事件 opaque：不透明目标可能会受到命中测试的打击，导致它们既在其范围内接收事件...，很奇怪；使用Listener不会产生此问题 我们的背景使用Container控件，我这里设置了Colors.transparent，直接会导致下层接受不到触摸事件，color为空才能使下层控件接受到触摸事件
今天我们来聊聊Flutter是如何监听和响应用户的手势操作的。...手势操作在Flutter中分为两类： 第一类是原始的指针事件（Pointer Event），即原生开发中常见的触摸事件，表示屏幕上的触摸（或鼠标、手写笔）行为触发的位移行为。...在手指接触屏幕，接触事件发起时，Flutter会确定手指与屏幕发生接触的位置上究竟有哪些组件，并将触摸事件交给最内层的组件去响应。事件会从这个最内层的组件开始，沿着组件树向根节点向上分发。...Flutter无法取消或停止事件的进一步分发，我们只能通过hitTestBehavior去调整组件在命中测试期内应该如何表现，比如把触摸事件交给子组件或者交给其视图层级之下的组件去响应。...： I/flutter (16188): Child tapped I/flutter (16188): parent tapped 总结 现在我们来简单回顾下Flutter是如何来响应用户事件的。
了解 iOS 手势的同学应该知道一个知识：处理屏幕触摸事件时，GestureRecognizer 拥有比 touchXXX 方法更高的优先级，默认情况下 GestureRecognizer 处理不了的触摸事件才会流转到...问题就是由于这个机制引起的：NavigationController 上的 PanGestureRecognizer 消费了所有的触摸事件，并没有把这些事件流转到 FlutterView，所以 Flutter...，因为有很多场景我们需要 FlutterView 独自处理触摸事件。...，则状态变为 failed，即 FlutterView 放弃对后续触摸事件的处理权，反之，则状态变为 began，即 FlutterView 可以处理后续的触摸事件。...的内部状态映射成 iOS 的状态，由于两边的设计理念不一致，所以必然有些情况是难以一一映射的，比如 Flutter 里不止有 GestureRecognizer 能够处理触摸事件，Listener 也可以
交互能力实现 交互能力是支撑 Flutter 应用能够正常运行的另一个基本要求。在 Flutter 中，交互包含了各种触摸事件、鼠标事件、键盘录入事件的传递及消费。...以触摸事件为例，Flutter 事件传递的整个流程如下图所示： ?...Flutter 事件分发 iOS/Android 的原生容器通过触摸事件的回调 API 接收到事件之后，会将其打包传递至引擎层，后者将事件传发给 Flutter 框架层，并完成事件的消费、分发和逻辑处理...(speechEventListener); // 语音录入事件 对于事件的封装处理，可以复用 Android 已有的逻辑，只需要关注鸿蒙与 Android 在事件处理上的对应关系即可，比如触摸事件的部分对应关系...在最基本的运行和交互能力之上，我们更需要关注 Flutter 与鸿蒙自身生态的结合：如何优雅地适配鸿蒙的分布式技术？如何用 Flutter 实现设备之间的快速连接、资源共享？
事件处理 7.1 原始指针事件 7.1.1 基本概念 一个完整的原始指针事件主要由手指按下、手指移动、手指抬起以及触摸取消构成，更高基本的手势都基于这些原始事件。...在Flutter的原始指针事件模型中，在手指接触屏幕发起触摸事件时，Flutter会首先确定手指与屏幕发生接触的位置上究竟有哪些组件，然后通过命中测试（Hit Test）交给最内层的组件去响应。...Flutter无法像浏览器冒泡那样取消或者停止事件的进一步分发，只能通过执行命中测试去调整组件的事件触发时机。...在Flutter的事件模型中PointerEvent是Flutter原始指针事件的基础类，可以用它获取当前指针的一些信息： 1）position：全局坐标的偏移量； 2）delta：两次指针移动事件的距离...’); ) ) 原始指针事件还提供了behavior属性，它决定子组件如何响应命中测试，它的值类型为HitTestBehavior，是一个枚举类型，有3个枚举值： 1）deferToChild：子组件一个接一个地进行命中测试
即将被移除，而随着最近 Flutter 3.0 的发布，这个变更正式在稳定版中如期而至，「所以今天就详细分析一下，新的 TextureLayer 如何替代 PlatformView」 。..."AndroidView"时，其实他们就真正”点击的是正在渲染的 Flutter 纹理 ，用户产生的触摸事件是直接发送到 Flutter View 中，而不是他们实际点击的 AndroidView。...image-20220516112123711 「此时因为 TextView 的子控件的 Canvas 被 Flutter 给替换了，所以在画面上看不到渲染内容，但是它们所在的位置依然可以接受点击事件」...AndroidView 传递过来的信息进行定位，而 PlatformViewWrapper 的位置其实和渲染效果没有关系，即使 PlatformViewWrapper 不在正常位置，画面也可以正常渲染，它影响的主要还是触摸事件的相关逻辑...❞ 值得注意的是， 「PlatformViewWrapper 里的 onInterceptTouchEvent 返回了 true ，也就是触摸事件会被它拦截，而不会传递到父控件，避免了 FlutterView
这段话的意思是：key这个属性控制一个widget如何替换树中的另一个widget。...Elements构成一棵树，大多数elements都会有唯一的孩子，但是一些widgets(如RenderObjectElement)可以有多个孩子。...首先知道Flutter是响应式框架，在某一个时刻，可能会受到不同的输入流影响，中间层Element对这一时刻的事件做了汇总，最后将需要修改的部分同步到RendObjecttree上，也就是： 尽可能的降低...其实并非那么简单，另外获取一些系统基本信息和初始化监听window对象的一些事件，然后将这些事件按照上层Framework模型规则进行包装、抽象最后分发。...Flutter从启动到显示图像在屏幕主要经过：首先监听处理window对象的事件，将这些事件处理包装为Framework模型进行分发，通过widget创建element树，接着通过scheduleWarmUpFrame
UIView 声明 4.4 事件响应链机制 上面介绍 UIView 负责响应触摸手势等事件有 UIResponder 负责， UIResponder 是 UIView 的父类，主要实现了事件响应链（Responder...其中最重要的就是 事件传递流程 以及 如何找到第一响应者。...事件响应链流程图 [2] 4.5 CALayer CALayer 与 UIView 的关系是： [3] UIView 为 CALayer 提供内容，专门负责处理触摸等事件，参与响应链 CALayer...本节尝试会它们进行一些类比，同时也会展示 Flutter 中的树实际是如何运行的。...参考资料 [1] iOS 坐标系统 https://cloud.tencent.com/developer/article/1330805 [2] iOS 技术总结 - UI 触摸事件与事件响应
前言 在熟悉了Flutter app开发以后，我们的好奇心会驱使对Flutter框架是如何运行产生诸多疑问，Flutter是如何运转的？Widget到底是什么东西？...调用sateState()之后页面又是如何刷新的？要解答这些问题，就需要学习一下Flutter框架的源代码。为此我会基于源码写一系列文章来分析一下Flutter框架。...本文是第一篇，主要是先介绍一下Flutter框架的总览和基础--Window。 总览 Flutter app的页面是如何显示到屏幕上的呢？...是什么驱动Flutter app刷新界面，播放动画以及响应触摸事件呢？这一过程可以用下图来描述。 ?...除渲染相关的API，window中还有一些其他重要的API也列一下： //触摸事件的回调 PointerDataPacketCallback _onPointerDataPacket; // 获取启动时初始页面的路由
触摸事件 默认情况下， PlatformViews 是没办法接收触摸事件，因为 AndroidView 其实是被渲染在 VirtualDisplay 中 ，而每当用户点击看到的 "AndroidView..." 时，其实他们就真正”点击的是正在渲染的 Flutter 纹理 ，用户产生的触摸事件是直接发送到 Flutter View 中，而不是他们实际点击的 AndroidView。...这就变成有些本末倒置，触摸事件从原生-Flutter-原生，中间的转化导致某些信息被丢失，也导致了响应的延迟。...viewType 注册了一个和原生层对应的注册名称，这和之前的 PlatformView 注册一样； 然后在 surfaceFactory 返回一个 AndroidViewSurface 用于处理绘制和接收触摸事件...接着我们继续测试，还记得前面说过 Virtual Display 上关于触摸事件的问题，所以此时我们直接给 PlatformView 的 灰色 RE 在原生层添加点击事件弹出 Toast 测试。
Flutter 给我们提供了一个 InheritedWidget 组件，来帮助我们完成上面功能。...Notification Notification 是 Flutter 中进行跨层数据共享的另一个重要的机制。...Flutter 中将这种由子向父的传递通知的机制称为通知冒泡（Notification Bubbling）。通知冒泡和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。...这时，事件总线 EventBus 就登场了。 事件总线是在 Flutter 中实现跨组件通信的机制。...) return; int len = list.length - 1; //反向遍历，防止订阅者在回调中移除自身带来的下标错位 for (var i = len; i > -1
1.前言经过上篇文章的介绍，已经将跨页面之间跳转的时候传参的方式介绍给大家了，本篇文章将给大家介绍如何在 Flutter 中使用手势交互。...2.手势交互2.1.简介Flutter中的手势系统是一个强大且灵活的方式，允许开发者捕获并响应触摸屏上的各种用户交互。2.2.常见手势类型与常用属性Tap（点击）:onTap: 当用户轻触屏幕时触发。...onTapDown: 当用户触摸屏幕并开始点击时触发。onTapCancel: 当用户取消点击时触发。Double Tap（双击）:onDoubleTap: 当用户在短时间内连续点击屏幕两次时触发。...GestureDetector还包含多个事件处理函数，如onTap、onDoubleTap、onLongPress等。这些函数分别在用户点击、双击或长按容器时触发，并在控制台中打印相应的消息。...3.参考资料https://docs.flutter.dev/ui/interactivity/gestureshttps://api.flutter.dev/flutter/widgets/GestureDetector-class.htmlEnd
(2).WE是如何刷新元素的 -----代码块2----- ws_element.dart add() { mElementShowingWidget = initWidget()...(3).ECWS如何构建整个容器 -----代码块2----- element_container_widget.dart @override Widget build(BuildContext...1.对于元素单指手势的处理，主要看三个触摸事件：down、move、up。所以我们直接看 ECWS.build 中设置的三个回调方法。...3.如果当前有选中的 WE 但与当前触摸的 WE 不是同一个的时候也分两种情况：一种情况是触摸的 WE 不存在，此时表示将 mMode 标记为 SINGLE_TAP_BLANK_SCREEN 表示点击了...另一种情况是触摸的 WE 存在，此时表示重新选中了一个 WE。 4.如果当前没有选中的 WE，也会有两种情况：一个是触摸的 WE 也不存在，那么和前面一样表示点击空白区域。
Android事件分发机制 我们只考虑最重要的四个触摸事件，即：DOWN,MOVE,UP和CANCEL。...假设用户首先触摸到的屏幕上的点是C上的某个点，该点被标记为触摸点（touch point），DOWN事件就在该点产生。...在刚才的“处理事件”部分中，我们遗漏了这一过程，现在，让我们把它加上： DOWN事件被传给A的onInterceptTouchEvent，该方法返回false，表示它不想拦截。...假如DOWN事件传给C的onTouchEvent方法时，它返回了false，DOWN事件会继续向上传递给B和A的onTouchEvent，即使它们在onInterceptTouchEvent方法中说它们不想拦截这个...个人理解：感谢@编程世界的孩子 的提醒，由此可见，DOWN事件的处理实际上经历了一下一上两个过程，下是指A- B的onInterceptTouchEvent，上是指C- B- A的onTouchEvent
2.2 触摸事件的监听 下面主要介绍一下主要的4个触摸事件处理： 1）DragDown ? 图6 dragDown触摸事件 如图6所示，这个事件主要是对应用户手指按下跟屏幕接触的时刻。...图7 dragStart触摸事件 如图7所示，这个是手势Recongnize认为用户这次的操作已经达到了drag的标准，此时用户本次手势的操作才真正被认为是一个合法的drag动作的开始。...图8 dragUpdate触摸事件 如图8所示，这个手势代表用户在dragStart后在屏幕上move的更新值。 4）DragEnd ?...图9 dragEnd触摸事件 如图9，dragEnd这个手势代表用户的手离开了屏幕，也就意味着这次手势操作的结束。...对于这块需要思考如何做进一步的优化。 四、结语 至此，对于CustomScrollView这个Flutter中比较复杂的且应用广泛的组件的大体运行机制我们就分析完了。
领取专属 10元无门槛券
手把手带您无忧上云
