iOS端Flutter点击WebView内文本框致父组件刷新的问题求助

问题根源 #

iOS端弹出键盘时，视图布局变化可能触发父组件重建。若包含Container的StatefulWidget没有稳定标识、状态管理逻辑不当，就会导致initState重复执行，打断输入操作。

具体解决方案 #

1. 给父组件添加稳定全局Key #

通过GlobalKey确保组件在布局变化时复用实例，避免被重新创建：

class YourParentWidget extends StatefulWidget {
  static final GlobalKey<_YourParentWidgetState> parentKey = GlobalKey<_YourParentWidgetState>();

  YourParentWidget({Key? key}) : super(key: parentKey);

  @override
  _YourParentWidgetState createState() => _YourParentWidgetState();
}

2. 优化initState逻辑 #

检查initState内是否存在不必要的setState或依赖上下文的异步操作，将这类逻辑移至didChangeDependencies或用Future.microtask延迟执行，避免初始阶段触发重建：

@override
void initState() {
  super.initState();
  Future.microtask(() {
    // 执行原本在initState中的异步逻辑
    _initAsyncLogic();
  });
}

3. 配置WebView的iOS专属参数 #

禁用自动布局调整，同时设置手势识别器避免冲突：

WebView(
  initialUrl: 'about:blank',
  onWebViewCreated: (controller) async {
    _webviewController = controller;
    await _loadHtmlFromUrl(context);
  },
  javascriptMode: JavascriptMode.unrestricted,
  onPageFinished: (finish) {
    if (mounted && _isLoading) {
      setState(() {
        _isLoading = false;
      });
    }
  },
  // 阻止手势冲突
  gestureRecognizers: {
    Factory(() => EagerGestureRecognizer()),
  },
  // 禁用iOS自动布局调整
  initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
)

4. 检查_loadHtmlFromUrl方法 #

确保该方法不会触发不必要的setState，加载操作直接通过WebView控制器执行，避免依赖上下文状态变化：

Future<void> _loadHtmlFromUrl(BuildContext context) async {
  final dynamicHtml = await getDynamicContent();
  if (_webviewController != null && mounted) {
    _webviewController!.loadHtmlString(dynamicHtml);
  }
}

5. 升级依赖版本（可选） #

webview_flutter 2.8.0存在部分iOS兼容性问题，升级至最新稳定版可修复已知bug：

dependencies:
  webview_flutter: ^4.4.0 # 替换为当前最新稳定版

核心思路 #

通过稳定组件标识、优化状态逻辑、适配iOS WebView配置三个方向，阻止父组件因键盘弹出触发的重建，从而恢复输入功能。

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