Flutter中WebView点击输入框外区域无法关闭键盘问题求助

你当前的写法存在两个核心问题：

• WebView属于平台原生视图，它内部输入框的焦点不纳入Flutter的焦点树管理，你调用FocusScopeNode.unfocus()只能收起Flutter侧输入框的键盘，对WebView内的输入框完全无效
• 外层未配置手势捕获属性的GestureDetector无法收到WebView区域的触摸事件，WebView会优先消费所有触摸事件，导致你的收起逻辑根本不会被触发

直接修改你代码中GestureDetector的配置，替换原有手势回调逻辑即可：

@override
Widget build(BuildContext context) {
  return GestureDetector(
    // 配置手势捕获属性，可同时捕获子控件区域的触摸事件
    behavior: HitTestBehavior.translucent,
    // 用onTapDown优先级高于onTap，可优先拿到WebView区域的触摸事件
    onTapDown: (_) {
      // 直接调用系统方法强制收起键盘，不受焦点所属限制
      SystemChannels.textInput.invokeMethod('TextInput.hide');
    },
    child: Scaffold(
      // 原有Scaffold内容完全不变
      appBar: null,
      body: SafeArea(
          child: IgnorePointer(
            ignoring: isLoading,
            child: Stack(
              children: [
                WebView(
                  initialUrl: 'https://google.com',
                  javascriptMode: JavascriptMode.unrestricted,
                  key: key,
                  onPageFinished: (value) {
                    setState(() {
                      isLoading = false;
                    });
                  },
                  onPageStarted: (value) {
                    setState(() {
                      isLoading = true;
                    });
                  },
                ),
                isLoading ? Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  color: Colors.grey.withOpacity(0.5),
                  child: const Center(child: CircularProgressIndicator())  ,
                ) : Container(),
              ],
            ),
          )),
    ),
  );
}

• 点击WebView内的输入框时，原生WebView会自动触发键盘弹出，不受当前收起逻辑影响
• 点击WebView内非输入框区域时，会触发系统键盘收起，完全符合你的需求
• 该方案无需额外注入JS，适配所有WebView加载的页面场景

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