news 2026/4/16 15:32:23

Flutter 又迎大坑修改?iOS 26 键盘变化可能带来大量底层改动

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Flutter 又迎大坑修改?iOS 26 键盘变化可能带来大量底层改动

又是一个小问题可能带来的大改动,感觉官方在评估的时候,有点过分细节了。

这个问题来自去年底的 #179482 issue ,Flutter 在 iOS 26 上,某些场景会因为出现半透明键盘,而页面底下本来应该被键盘遮挡的 Widget,由于默认没有被绘制,从而出现键盘背景颜色 UI 异常:

虽然问题看起来是一个圆角问题,但是实际上这是iOS 26 系统键盘增加了“半透明”后带来的问题,Flutter 在键盘后面那一层在某些场景下没有正确渲染内容,导致键盘半透明区域透出来的不是底下 BottomSheet 的真实内容,而是一整块黑色区域。

issue 提到问题,问题最明显的场景主要出现在 iOS 26 的showModalBottomSheet()下。

为什么会这样?首先就是你的 App 目前是否使用了最新 Xcode 26 ,以及在Info.plist里有没有使用UIDesignRequiresCompatibility = YES让 App继续使用旧的系统设计风格

通过上面前两张图我们可以看到,iOS 26 正常情况下,系统键盘其实是会出现半透明效果并且具备圆角,虽然透明效果不是特别明显,但是对比后两张图里,可以看到微信和淘宝还是保留着原本的 iOS 18 的直角效果。

如果还是保留原本风格,其实并不会遇到这个问题。

所以这个 issue 首先是需要在 Xcode 26 下,并且没有关闭 Liquid Glass 适配的情况下才会遇到,当然,就算是 iOS 26 场景,一般情况下也不会有什么大问题,比如下图直接在界面内使用一个TextField,其实并不会有明显问题:

问题还是主要出现在类似showModalBottomSheet的场景,特别是在背景色透明的时候,虽然我们设置了backgroundColor: Colors.transparent,**但是在 Flutter 里,某些时候 UI 并不会“在键盘背后继续画” ** ,因为在 iOS 26 之前,Flutter(以及很多跨平台框架)都默认:

系统键盘 = 完全不透明的遮挡物,所以 Flutter 的 pipeline 会认为键盘区域背后不需要特殊关注。

实际上类似同样的问题,在 RN 里也是存在,甚至对于 CMP 来说也是存在不一样的问题,所以对于 CMP 来说,才会有 1.10 Interop views 新特性 Overlay ,用于支持 UIKit 的半透明/blur 可以采样到 Skia 的内容的实验性 API :

所以这个问题实际上的本质不是圆角,比如我把showModalBottomSheet背景改成红色,此时你可以看到键盘是可以采集到背景色的,甚至我把Container也改成红色,你也看不出来异常:

所以问题更多出现在透明色上,随着showModalBottomSheet弹出并带有透明色的时候,由于 Flutter 认为被键盘这挡住的下层 Widget 并不需要绘制,所以导致系统键盘采集不到对应的像素点,从而出现了一开始的黑色背景。

所以其实这个 Bug 如果想临时解决,只需要在Info.plist里配置UIDesignRequiresCompatibility = YES就可以了,只是此时 App UI 会是 iOS 18 的风格:

如果再对比抖音和 Github App ,就可以看到 iOS 26 新键盘风格对于整体应用的风格影响还是挺大的,所以不少 App 目前会选择通过关闭适配拖延时间。

那为什么会说,这个 Bug 会导致整个底层生态的重构?因为 iOS 26 改变了“系统键盘会完全遮挡 App 内容”这一长期不变的底层假设,而 Flutter 的渲染 / 布局 / Insets / 事件系统,几乎全都建立在旧假设之上,这套逻辑几乎渗透在:

  • RenderObjectlayout
  • Scaffold/BottomSheet/Navigator
  • MediaQuery
  • TextInputPlugin
  • Engine 中的 view hierarchy
  • ···

也就是如果想完全适配这个新场景(多层嵌套下还提供键盘场景的透明支持),一旦需要完全支持“键盘下内容需要绘制”,就要系统性重构多个核心层,例如

Framework 层(Dart)

  • MediaQuery.viewInsets
    • 现在代表“不可见区域”
    • 未来要不要拆成多个:coveredInsetsobscuredInsetsvisualInsets
  • Scaffold / BottomSheet
    • 是否仍然自动 resize?
    • 还是只做布局、不做裁剪?
  • Clip 行为
    • 现在大量 widget 默认不 clip

Engine 层(iOS embedder)

  • FlutterView / UIView hierarchy
  • CALayer 合成顺序
  • 系统 keyboard window vs Flutter window
  • 是否需要:
    • 在被遮挡区域继续 raster
    • 或改变 backing store 策略

输入系统 & Hit Test

  • 键盘下的 widget:
    • 画出来了
    • 但不能响应触摸
  • Flutter 目前的 hit-test 假设:
    • “看得见 = 可点”

插件 & 三方生态

  • 各种:
    • bottom sheet 插件
    • keyboard avoiding 插件
    • 聊天 UI
  • 各种涉及“手搓” viewInsets 的场景

所以这个“语义场景”如果发生比变化,那么涉及的将是大量底层改动,甚至一些性能指标都会需要调整,从长远来看,这还会是一个 iOS 平台特有的差异化适配场景,并且引入大量 bread change

最后

最后总结下,正常大家使用输入框输入文本内容不会有什么问题,甚至如果你用 Dialog 场景也不会有什么问题,甚至你看下方最后一张图片,在 dialog 下的键盘依然可以正常透视工作:

所以问题主要还是存在于BottomSheet这种场景,因为BottomSheet默认行为是认为底部对齐,高度有限,所以对于BottomSheet会认为底部高度区域在键盘下不渲染,所以导致最后采集不到像素出现黑色。

针对问题其实可以选择配置UIDesignRequiresCompatibility = YES来解决,或者替换为 Dialog 来绕过场景,但是如果要等官方修复这个场景,可能会需要等待评估是否真的有必要大规模底层改动。

从我的角度看,这完全没必要,毕竟真这么修改,带来的就是生态的大量 break change。

参考链接

https://github.com/flutter/flutter/issues/179482

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/15 23:23:45

852-017500-003-6-C220ASSEMBLY CHASSIS 14 英寸屏幕LAM

产品概述该部件为LAM Research(泛林半导体)生产的设备组件,型号为852-017500-003-6-C220,属于14英寸屏幕的底盘组装件(Chassis Assembly)。LAM Research是全球领先的半导体制造设备供应商,此类组…

作者头像 李华
网站建设 2026/4/12 22:38:10

便携式半实物测试平台 ETest_PT

1)产品简介 ETest_PT是一款便携嵌入式系统测试平台,由软件和硬件两部分组成,软件采用ETest,硬件包括测试主机、USB接口设备(CAN、TCP/UDP、RS232/422/485、AD/DA/DI/DO、ARINC429、1553B、1394B、FC等)。 …

作者头像 李华
网站建设 2026/4/16 13:36:00

解构AIGC落地困局:低代码如何成为普惠AI的技术桥梁

当大模型的浪潮席卷整个IT圈,AIGC早已从概念走向实践,但一个残酷的现实摆在眼前:90%的企业仍无法真正享受到AI技术的红利。不是因为模型不够强大,也不是因为需求不够迫切,而是卡在了“技术落地的最后一公里”——复杂的…

作者头像 李华
网站建设 2026/4/16 13:36:33

从 DWG / IFC 到工程级可视化:HOOPS 如何支撑 AEC 软件底层能力?

随着市场变化和需求增加,开发者需要明确能够满足行业需求的基础架构。要开发出现代化的建筑信息模型(AEC)软件,通常需要解决四个基础领域的问题:数据访问、建模、可视化和仿真。Tech Soft 3D为上述每个领域都提供了工具…

作者头像 李华
网站建设 2026/4/16 15:06:46

开源APS排产系统,出货计划如何成为企业降本增效的关键?

在现代制造业生产管理中,企业不仅需要高效地生产产品,更需要确保产品在正确的时间交付给客户。APS(高级计划与排程)系统的出货计划功能,正是通过智能算法将库存、生产能力和客户需求精准匹配,为企业提供可视…

作者头像 李华
网站建设 2026/4/16 13:35:03

《深入 Python 序列化世界:msgpack vs pickle 的本质区别与安全真相》

《深入 Python 序列化世界:msgpack vs pickle 的本质区别与安全真相》 一、开篇:为什么我们必须重新审视 Python 的序列化? 如果你写过 Python Web 服务、分布式任务、缓存系统、微服务通信、模型持久化,序列化一定是绕不过去的主…

作者头像 李华