Flutter InAppWebView iOS 输入框键盘遮挡问题分析与解决方案

问题现象描述

在使用 Flutter InAppWebView 插件时，iOS 17.x 系统上出现了一个影响用户体验的问题：当网页中包含多个输入框且页面内容不足一屏时，用户在不同输入框之间切换时，页面会出现异常滚动，导致键盘遮挡部分输入内容。

问题复现条件

1. 运行环境：iOS 17.x 系统（从用户反馈看，iOS 15.7 未出现此问题）
2. 页面特征：包含多个输入框的网页，且页面内容不足以填满整个屏幕
3. 操作步骤：
   • 用户点击第一个输入框，键盘正常弹出
   • 切换到第二个输入框时，页面出现异常滚动
   • 键盘会遮挡部分输入内容

技术背景分析

这个问题属于 iOS WKWebView 在较新版本系统中的行为变化。在 iOS 17 中，WebKit 引擎对输入框的聚焦处理逻辑有所调整，特别是在处理多个输入框的切换时，自动滚动行为与键盘弹出动画之间出现了不协调。

解决方案

方案一：调整 WebView 内容插入边距

通过设置 WebView 的内容插入边距（contentInset），可以避免键盘弹出时内容被遮挡。这是最直接有效的解决方案。

InAppWebView(
  initialOptions: InAppWebViewGroupOptions(
    ios: IOSInAppWebViewOptions(
      contentInsetAdjustmentBehavior: IOSUIScrollViewContentInsetAdjustmentBehavior.Never,
    ),
  ),
  // 其他参数...
)

方案二：JavaScript 滚动控制

通过注入 JavaScript 代码，在输入框聚焦时手动控制页面滚动位置：

onLoadStop: (controller, url) async {
  await controller.evaluateJavascript(source: """
    document.addEventListener('focusin', function(event) {
      if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
        setTimeout(function() {
          event.target.scrollIntoView({behavior: 'smooth', block: 'center'});
        }, 300);
      }
    });
  """);
},

方案三：调整键盘处理策略

对于 Flutter 端，可以尝试调整键盘处理策略：

Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false, // 防止 Scaffold 自动调整
    body: InAppWebView(
      // WebView 配置...
    ),
  );
}

兼容性考虑

需要注意的是，此问题主要出现在 iOS 17.x 系统中，在较早版本的 iOS 上可能不会出现。因此，在实现解决方案时，建议：

1. 进行系统版本检测，仅对 iOS 17+ 应用特殊处理
2. 全面测试不同 iOS 版本下的表现
3. 考虑网页本身的设计是否可以通过调整布局来避免此问题

最佳实践建议

1. 对于表单密集的页面，建议设计为单列布局，确保每个输入框有足够的间距
2. 考虑使用固定高度的容器包裹 WebView，避免页面内容不足一屏的情况
3. 在 Web 端，可以添加 scroll-padding CSS 属性来改善滚动行为
4. 对于关键表单页面，考虑使用原生 Flutter 组件替代 WebView 内容

总结

Flutter InAppWebView 在 iOS 17 上的输入框键盘遮挡问题，本质上是系统 WebKit 引擎行为变化导致的。通过合理配置 WebView 参数、添加 JavaScript 控制逻辑以及调整页面布局策略，可以有效解决这一问题。开发者应当根据实际应用场景选择最适合的解决方案，并在不同设备和系统版本上进行充分测试。