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

人工智能:自然语言处理在教育领域的应用与实战

人工智能:自然语言处理在教育领域的应用与实战

人工智能:自然语言处理在教育领域的应用与实战 学习目标 💡 理解自然语言处理(NLP)在教育领域的应用场景和重要性 💡 掌握教育领域NLP应用的核心技术(如智能问答、作业批改、个性化学习) 💡 学会使用前沿模型(如BERT、GPT-3)进行教育文本分析 💡 理解教育领域的特殊挑战(如多学科知识、学生认知差异、数据隐私) 💡 通过实战项目,开发一个智能问答系统应用 重点内容 * 教育领域NLP应用的主要场景 * 核心技术(智能问答、作业批改、个性化学习) * 前沿模型(BERT、GPT-3)在教育领域的使用 * 教育领域的特殊挑战 * 实战项目:智能问答系统应用开发 一、教育领域NLP应用的主要场景 1.1 智能问答 1.1.1 智能问答的基本概念 智能问答是通过自然语言与用户进行交互,回答用户问题的程序。在教育领域,智能问答的主要应用场景包括: * 课程问答:回答课程相关的问题(如“什么是机器学习”

AI时代人人都是产品经理:落地流程:AI 核心功能,从需求到上线的全流程管控方法

AI时代人人都是产品经理:落地流程:AI 核心功能,从需求到上线的全流程管控方法

AI的普及正在重构产品经理的工作模式——不再依赖传统的跨部门协作瓶颈,AI可以成为产品经理的"全职助手",覆盖需求分析、原型设计、开发协同、测试验证全流程。本文将拆解AI时代产品核心功能从0到1落地的完整管控方法,让你用AI能力提升300%的落地效率。 一、需求阶段:AI辅助的需求挖掘与标准化 需求是产品的起点,AI可以帮你从海量信息中精准定位用户真实需求,避免"伪需求"浪费资源。 1. 需求挖掘:AI辅助用户洞察 传统需求调研依赖问卷、访谈,效率低且样本有限。AI可以通过以下方式快速完成用户洞察: * 结构化处理非结构化数据:用AI分析用户在社交媒体、客服对话、应用评论中的碎片化反馈,自动提炼高频需求点 * 需求优先级排序:基于KANO模型,AI可以自动将需求划分为基础型、期望型、兴奋型、无差异型四类,输出优先级列表 实战工具与示例: 使用GPT-4+Python脚本批量处理应用商店评论: import openai import pandas as

Flutter 三方库 algolia_client_recommend 的鸿蒙化适配指南 - 打造 AI 驱动的个性化推荐引擎、助力鸿蒙端电商与内容应用转化率倍增

Flutter 三方库 algolia_client_recommend 的鸿蒙化适配指南 - 打造 AI 驱动的个性化推荐引擎、助力鸿蒙端电商与内容应用转化率倍增

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 algolia_client_recommend 的鸿蒙化适配指南 - 打造 AI 驱动的个性化推荐引擎、助力鸿蒙端电商与内容应用转化率倍增 前言 在 OpenHarmony 鸿蒙应用全场景连接的商业版图中,“信息找人”已成为提升流量价值的核心逻辑。无论是电商应用的“经常一起购买”,还是内容平台的“相关推荐”,高质量的个性化算法能显著降低用户的决策成本。algolia_client_recommend 作为一个连接 Algolia 顶尖 AI 推荐服务的专业客户端,为开发者提供了一套开箱即用的推荐逻辑封装。本文将详述如何在鸿蒙端利用此库构建“读懂用户”的智能化交互。 一、原原理分析 / 概念介绍 1.1 基础原理 algolia_client_recommend 的核心逻辑是 基于意图建模的异步推荐查询与联合过滤机制

Plottable高级图表制作:从散点图到堆叠面积图的10种实现方法

Plottable高级图表制作:从散点图到堆叠面积图的10种实现方法 【免费下载链接】plottable:bar_chart: A library of modular chart components built on D3 项目地址: https://gitcode.com/gh_mirrors/pl/plottable Plottable是一个基于D3.js构建的模块化图表组件库,为开发者提供了创建灵活、定制化图表的强大工具。这个开源项目专注于"组合优于配置"的理念,让你能够像搭积木一样构建复杂的图表系统。通过Plottable的高级图表制作功能,你可以轻松实现从基础散点图到复杂堆叠面积图的各种数据可视化需求。😊 为什么选择Plottable进行高级图表制作? Plottable不是一个传统的图表库,而是一个图表组件库。这意味着你拥有前所未有的灵活性来创建自定义图表。与直接使用D3相比,Plottable提供了更高层次的抽象,让图表制作变得更加简单快捷;与传统图表库相比,它又提供了无与伦比的定制能力。 核心关键词:Plottable图表制作、D3图表组件、高级数据可