Flutter 官方正式解决 WebView 在 iOS 26 上有点击问题

Flutter 官方正式解决 WebView 在 iOS 26 上有点击问题

上个月和大家聊到了 《为什么你的 Flutter WebView 在 iOS 26 上有点击问题?》 ,源头是因为 WKWebView(WebKit)内部的手势识别器与 Flutter 在 Engine 里用于“阻止/延迟”手势的 recognizer 之间的冲突,因为 Flutter 和 UIKit 都各自有手势识别系统(GestureRecognizer),为了防止互相抢事件,Flutter engine 在 iOS 上加入了一个“delaying gesture recognizer”(延迟识别器),这也最终导致了 iOS 26 上的 bug :

在 Flutter 弹窗和 WKWebView 一起出来的时候,要么点不动,要么触摸会穿透到下面的 WebView 。

而在提供了之前部分场景有效的临时解决方案之后,Flutter 官方也提出了几个对应的可行性重构方案,具体可见 https://docs.google.com/document/d/1ag4drAdJsR7y-rQZkqJWc6tOQ4qCbflQSGyoxsSC6MM/ ,而现在方案三最终确定并 LGTM :

回顾整个问题里程,主要有两点:

  • 现有的 “gesture recognizer approach” (依赖自定义 UIGestureRecognizer + shouldRequireFailureOfGestureRecognizer)存在局限:无法阻止 UIView / JS 的底层 touch 回调(例如 WebView 的 touchstart),并且会和 WebView 的内部识别器冲突(这个导致了 iOS 的平台 bug),从而让一直以来的 hack 实现(如 remove/re-add recognizer)不生效:
因为 JS的 touchstarttouchesBegan 当帧同步触发,Flutter 没法在 touchesBegan 前屏蔽掉事件。
  • 以前为了解决 Google Maps 的 “dangling touchesBegan” 问题,引入了 WaitUntilTouchesEnded 策略,这是个权宜之计但并不理想,本质也是一种延迟机制:
因为当时 Flutter 没有能力在 touchesBegan 之前阻止触摸的到达,只能用 gesture recognizer 阻断,而这就导致了 Google Maps 在 touchesBegan 之后,后续 touchesEnded 会变成 recognizer fails 从而不会收到 touchesEnded,而这就是 WaitUntilTouchesEnded 诞生的背景,WaitUntilTouchesEnded 的目的就是避免 Google Maps 在中途被强制 fail,导致内部手势状态机 fails。

其实这一切的原因都是已经“异步协同”,所以现在修复开始改为“同步”,也就是 Flutter Engine + iOS embedder 新增了 “同步 hitTest 回调” 能力 :

  • iOS embedder 增加了可拦截 hitTest 的 UIView
  • Engine 与 Dart Framework 通过 FFI 实现“同步回调”

具体来说就是,首先是 Dart Framework 层,这里新增手势拦截策略 API (UiKitView),在 UiKitView 组件中新增了 gestureRecognizersBlockingPolicy 参数,让开发者可以为每个 PlatformView 单独配置手势拦截行为:

策略名称拦截时机使用技术解决核心问题
touchBlockingOnly最快 (HitTest 阶段)iOS hitTest 重写修复 iOS 18+/26 WebView/AdMob 无法点击
eager快 (手势竞争胜出时)阻塞手势识别器(旧默认值,现已不推荐)
waitUntilTouchesEnded慢 (手指抬起后)阻塞手势识别器过去修复 Google Maps 状态卡死问题
fallbackToPluginDefault(取决于插件设定)(取决于插件设定)保持旧插件兼容性
新机制让开发者可以在 Dart 代码中直接指定 PlatformView 的手势拦截策略,而不是依赖全局配置或原生代码,根据不同场景配置不同的拦截处理机制,而 touchBlockingOnly 就是全新的支持。

例如针对 AdMob 或 WebView 在 iOS 18+/26 上的点击穿透问题,现在开发者可以强制使用 touchBlockingOnly 策略,从而绕过有问题的 gesture recognizer 机制。

另外也提供了 fallbackToPluginDefault,确保不修改代码的情况下维持原有插件的行为。

接着就是在 Dart Framework 层实现了 Hit Test 逻辑,用于响应 Engine 发起的命中测试请求,判断点击位置是否落在 PlatformView 上:

当用户点击屏幕时,Flutter 通过 Render Tree 判断该位置最上层是否是 PlatformView,如果是被 Flutter 组件(如下拉菜单)遮挡,firstHit 就不会是 NativeHitTestTarget,从而拦截触摸。

然后就是 Engine / Bridge 层的通信,这部分主要负责将 iOS 原生的同步调用桥接到 Dart 环境,这里提供了一个同步的 Dart 入口点 _platformViewShouldAcceptTouch,从而让 iOS 原生的 hitTest 方法可以阻塞等待 Dart 的判断结果:

之后就是 iOS Engine 层重写了 hitTest 方法,这也是本次修复的核心,通过重写 PlatformView 的 hitTest 方法,在通过响应链传递触摸事件之前,先询问 Flutter Framework 是否应该拦截该事件:

- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event { if (_blockingPolicy == FlutterPlatformViewGestureRecognizersBlockingPolicyTouchBlockingOnly) { // // ... (获取 flutterViewController) CGPoint pointInFlutterView = [self convertPoint:point toView:self.flutterViewController.view]; // 询问 Framework 是否应该接收此触摸 if (![self.flutterViewController platformViewShouldAcceptTouchAtTouchBeganLocation:pointInFlutterView]) { // // 如果 Framework 说 "不" (例如点击了 Flutter 遮罩),返回 self (拦截触摸) return self; } } // 如果 Framework 说 "是",调用 super,让事件传递给 WKWebView return [super hitTest:point withEvent:event]; } 

而对应的就是,如果策略是 TouchBlockingOnly,则不再添加容易导致冲突的 delayingRecognizer :

也就是,现在会先通过 hitTest 预先判断,避免了使用 UIGestureRecognizerDelegate 带来的复杂性和 iOS 18+ 上的 Bug,而当 platformViewShouldAcceptTouch 返回 NO 时,FlutterTouchInterceptingView 自身会吞掉事件,底层的 WebView 就不会收到错误的点击,从而修复了点击穿透或链接无法点击的问题。

最后

可以看到,本次调整数据较大的底层变动,所以牵动的模块也比较多,这也是为什么这个 PR 一直拖到现在才合并的原因,因为需要考虑和测试的因素很多:

而对于开发者来说,如果要引用修复,最好是通过增加对应的 gestureBlockingPolicy 参数来支持配置,只针对有问题的场景使用 touchBlockingOnly ,因为这怎么说也是一个底层大变更,会不会有新的问题还不好说。

参考链接

  • https://github.com/flutter/flutter/pull/179659
  • https://github.com/flutter/flutter/issues/175099

Read more

【AI绘画】Midjourney进阶:色调详解(上)

【AI绘画】Midjourney进阶:色调详解(上)

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]本文专栏: AI绘画 | Midjourney 文章目录 * 💯前言 * 💯Midjourney中的色彩控制 * 为什么要控制色彩? * 为什么要在Midjourney中控制色彩? * 💯色调 * 白色调 * 淡色调 * 明色调 * 💯小结 💯前言 【AI绘画】Midjourney进阶:色相详解     https://blog.ZEEKLOG.net/2201_75539691?type=blog 在上一篇文章中,我们详细探讨了色相的基本概念和运用。而色相作为色彩的基础,虽然能帮助我们区分颜色的种类,但它并不能完全满足实际创作中的需求。尤其在 AI绘画中,颜色的呈现往往需要更加精细的调控,颜色的表达也需要超越单纯的“色相”维度。例如,当我们谈到蓝色时,仅仅知道它是蓝色并不足够。在不同的创作场景中,蓝色可以呈现为淡蓝、深蓝、灰蓝或纯蓝等多种形式,而每一种形式都能传递不同的氛围与视觉感受。 对这些变化的理解与运用,其实是对色调的掌握。色调可以看作是颜色的性格特征,

H5-Dooring低代码可视化编辑器:5分钟上手,零代码打造专业H5页面

H5-Dooring低代码可视化编辑器:5分钟上手,零代码打造专业H5页面 【免费下载链接】h5-DooringMrXujiang/h5-Dooring: h5-Dooring是一个开源的H5可视化编辑器,支持拖拽式生成交互式的H5页面,无需编码即可快速制作丰富的营销页或小程序页面。 项目地址: https://gitcode.com/gh_mirrors/h5/h5-Dooring 还在为H5页面开发而头疼?传统方式下,一个简单的营销页面都需要前端工程师耗费数小时编写HTML、CSS和JavaScript代码。但现在,有了H5-Dooring这款开源免费的低代码可视化编辑器,一切变得像搭积木一样简单有趣! 场景化应用:从营销页面到数据大屏的全能解决方案 营销活动页面:节日促销的快速制作秘籍 想象一下,临近中秋,你的公司需要紧急制作一个节日促销页面。传统方式下,你需要找前端工程师加班加点,但现在,你只需要: 第一步:在项目管理首页点击"新建页面",选择中秋主题模板 第二步:拖拽组件搭建页面结构 - Banner、商品列表、优惠券模块 第三步:配置组件内容 -

格拉姆角场(Gramian Angular Field, GAF)详解

格拉姆角场(Gramian Angular Field, GAF)详解

格拉姆角场(Gramian Angular Field, GAF)是一种于2015年被提出的时间序列可视化与特征编码技术。其核心思想是将一维时间序列转换为二维图像,并在此过程中保留原始序列的时间依赖关系与数值特征。目前,GAF已在故障诊断、生物电信号分析、射频信号识别等多个领域得到广泛应用。 GAF的实质是借助极坐标变换与格拉姆矩阵的结构,将一维序列中的“时间–数值”映射为图像中的像素关联信息。生成的图像矩阵的行列索引直接对应时间顺序,使其能够兼容主流图像识别模型(如CNN),从而挖掘出时间序列中的深层特征。 一、GAF 的核心设计逻辑 传统的一维时间序列包含两类基本信息:数值大小(如振幅)和时间顺序(如信号随时间的变化趋势)。折线图等常规方法虽能展示趋势,却难以显式表达不同时刻之间的数值关联。GAF 通过以下三步逻辑实现信息的结构化编码: 1. 数值归一化:将原始序列缩放至[-1, 1]区间,消除量纲与异常值影响,为极坐标变换提供基础; 2. 极坐标转换:将时间索引映射为半径,数值大小映射为角度,建立 时间-数值 在极坐标系统中的对应关系; 3. 格拉姆矩阵构建:

RS485收发器在FPGA中的应用及注意事项

RS485收发器在FPGA中的应用及注意事项

1 前言 明确设计思路,精准定位问题,对于我们后期理解迭代工程有很大的帮助。 这就是我们常说的40%设计,20%编写和剩下的40%时间进行调试优化。 今天为大家带来的是如何解决RS485收发器使能转变引起的毛刺。 2 问题 Q1:什么时候需要用到RS485收发器? Q2:为何RS485收发器使能转变会引起毛刺? Q3:如何处理毛刺规避FPGA时序判断? 3 RS485收发器 3.1 硬件基础 3.1.1 标准收发器 RS485收发器是一类集成电路芯片,它的核心作用是在微控制器(如FPGA、MCU)的逻辑电平(如TTL电平,通常是0V/3.3V或0V/5V)与RS485差分信号之间进行双向转换。大多数RS485收发器还具备使能控制引脚(DE或RE),允许主控芯片灵活地切换其工作模式——发送或接收,从而支持半双工通信架构。 在实际应用中,微控制器输出的信号属于低电压、低电流的逻辑电平,适合短距离、高精度的内部电路通信,但无法直接用于长距离传输,