PAYATHON 2026

Flutter Web 在 Android 返回手势关闭键盘后为何会缩屏?

数据阿明

结论

这符合 Flutter Web 页面在 Android Chrome 中,键盘收起后视口或画布尺寸没有正确恢复时的表现。描述中,点击页面按钮关闭键盘后布局正常;使用屏幕返回手势时,Flutter 内容会缩至约一半,下方留下空白的 HTML 区域。换成只有一个 TextField 的新项目也能复现。

现有信息还不足以确定具体原因,也无法确认某个 Flutter 或 Chrome 版本已经修复了这个问题。

建议的排查步骤

  1. 记录 Flutter、Android 和 Chrome 的版本及设备型号,并确认页面是否以全屏方式打开。这些信息可以帮助判断问题是否只出现在特定的浏览器和系统组合中。
  2. 在同一设备和页面上,分别点击页面按钮和使用返回手势关闭键盘。记录两种操作后页面的高度,以及浏览器地址栏是否变化。
  3. 如果能通过浏览器开发工具或页面日志查看 window.innerHeight,比较键盘弹出和收起前后的数值。如果视口高度已恢复,但 Flutter 内容仍然缩小,问题可能出在页面布局或画布尺寸更新环节。这个结果只能帮助缩小排查范围,不能单独确认根因。
  4. 用只包含一个 TextField 和基础 Scaffold 的项目复现问题,并在相同设备和浏览器上重复操作。题目中的代码已经接近这样的最小复现,可作为后续提交问题的基础。
  5. 备份项目后,使用当前可用的 Flutter 稳定版和 Chrome 版本复测,并记录每次测试的版本号。一次复测不足以证明问题已修复,也不能据此认定它属于某个已知缺陷。

临时处理与问题反馈

确认修复前,可以提示用户点击页面按钮收起键盘;如果页面已经缩屏,也可以刷新来恢复布局。这些方法只是临时绕行,不一定适用于所有设备和项目。

提交 Flutter Web 缺陷报告时,请附上最小复现代码、设备和版本信息、两种关闭键盘方式的对比结果,以及页面缩屏的录屏。现有信息没有列出 Flutter、Android 或 Chrome 的具体版本,因此无法据此提供针对某个版本的配置改法或确定的代码补丁。

备注:内容仅供参考。