iOS 17.2中Flutter WebView切换输入焦点时顶部出现未知区域求助

问题背景 #

在iOS 17.2版本中，使用Flutter的InAppWebView（或官方WebView）时，切换Web页面内的输入框焦点，屏幕顶部会出现一块未知空白区域。已知将Scaffold的resizeToAvoidBottomInset设为false可以消除空白，但会导致页面被键盘遮挡，需要实现键盘弹出时UI不被遮挡且无顶部空白的效果。该问题仅出现在iOS 17.2，Android无此现象。

问题分析 #

这是iOS 17.2系统键盘与Flutter布局resize机制的适配冲突：当WebView内部切换输入焦点时，系统重复触发了底部内边距（bottom inset）的计算，导致Scaffold过度调整布局，顶部出现空白。直接关闭resizeToAvoidBottomInset会丢失键盘适配，因此需要手动处理键盘高度。

解决方案 #

1. 手动处理键盘内边距，替代Scaffold自动resize #

保持resizeToAvoidBottomInset: false，通过MediaQuery监听键盘高度变化，手动给WebView添加底部内边距，确保页面不被键盘遮挡，同时避免顶部空白。

静态适配代码

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class TestWebView extends StatelessWidget {
  const TestWebView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;
    return Scaffold(
      resizeToAvoidBottomInset: false, // 关闭自动resize
      body: SafeArea(
        child: Padding(
          // 手动添加底部内边距适配键盘
          padding: EdgeInsets.only(bottom: bottomInset),
          child: InAppWebView(
            initialFile: "assets/test2.html",
            initialSettings: InAppWebViewSettings(
              useShouldOverrideUrlLoading: true,
              mediaPlaybackRequiresUserGesture: false,
            ),
          ),
        ),
      ),
    );
  }
}

动态监听键盘变化（推荐）

如果需要实时响应键盘弹出/收起的状态，使用StatefulWidget实现动态更新：

class TestWebView extends StatefulWidget {
  const TestWebView({Key? key}) : super(key: key);

  @override
  State<TestWebView> createState() => _TestWebViewState();
}

class _TestWebViewState extends State<TestWebView> {
  double _bottomInset = 0;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    setState(() {
      _bottomInset = MediaQuery.of(context).viewInsets.bottom;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.only(bottom: _bottomInset),
          child: InAppWebView(
            initialFile: "assets/test2.html",
          ),
        ),
      ),
    );
  }
}

2. 优化Web页面的viewport和样式 #

修改Web页面的viewport属性，添加viewport-fit=cover，确保页面能正确适配iOS的安全区域，避免布局偏移：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

同时调整底部固定按钮的样式，适配iOS底部安全区域：

.btnBottom{
    position:fixed;
    width:100%;
    bottom: env(safe-area-inset-bottom);
    left:0;
}

3. 升级依赖版本 #

该问题属于iOS 17.2的适配bug，Flutter官方和InAppWebView后续版本可能已修复。建议升级到：

• Flutter 3.16.x及以上稳定版
• InAppWebView 6.x及以上版本（注意版本兼容）

验证效果 #

修改后，切换输入焦点时顶部不会出现空白，键盘弹出时WebView底部会自动留出空间，页面不会被遮挡，同时保持Web页面的正常交互。

内容的提问来源于stack exchange，提问作者Jeon