在颤动的WebView输入之外点击时关闭键盘答案

【问题标题】：Close keyboard when tap outside the WebView input in flutter在颤动的WebView输入之外点击时关闭键盘
【发布时间】：2021-12-20 18:48:42
【问题描述】：

我为此工作了 4 个多小时，但无法完成。我想要做的是在输入焦点区域外点击时隐藏键盘。不知何故，键盘无法隐藏。

我在 StackOverflow 上尝试了所有可能的答案，但找不到我的解决方案。

输出：即使在谷歌输入搜索后键盘仍然存在

我的方法

// ignore_for_file: prefer_const_constructors
// ignore: use_key_in_widget_constructors
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/services.dart';
 
void main(){
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Color(0xff1e2229)
  ));
   runApp(MyApp());
}

 
class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
            debugShowCheckedModeBanner: false,
            home:  Scaffold(
                       body:WebViewClass()        
                            ),
            );
  
  }
}
 
class WebViewClass extends StatefulWidget {
  WebViewState createState() => WebViewState();
}

class WebViewState extends State<WebViewClass> {

  bool isLoading = false;

  final key = UniqueKey();
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
         onTap: () {
            FocusScopeNode currentFocus = FocusScope.of(context);
            if (!currentFocus.hasPrimaryFocus) {
              currentFocus.unfocus();
            }
           },
        child: 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(),
                        ],
                      ),
                    )),));

  }
}

如果有人指导我解决这个问题，那就太好了。

【问题讨论】：

标签： flutter dart

【解决方案1】：

请在有状态小部件的 initstate 中使用此代码。

 if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();

【讨论】：

在vs代码中显示红线错误...我需要先安装什么包？
使用这个包并阅读和实施所有文档pub.dev/packages/webview_flutter
已经包含
显示什么类型的错误请解释我或发送屏幕截图并告诉我您使用的是什么手机？
谢谢你现在它的工作pefectlly！

【解决方案2】：

根据新的flutter webviewdocumentation：将这段代码放在给定的完整示例中将解决键盘关闭问题。感谢@khunt arpit

@override
   void initState() {
     super.initState();
         // Enable hybrid composition.
         if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
   }

完整示例代码：

 import 'dart:io';
 import 'package:webview_flutter/webview_flutter.dart';

 class WebViewExample extends StatefulWidget {
   @override
   WebViewExampleState createState() => WebViewExampleState();
 }

 class WebViewExampleState extends State<WebViewExample> {
   @override
   void initState() {
     super.initState();
         // Enable hybrid composition.
 if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
   }

   @override
   Widget build(BuildContext context) {
     return WebView(
       initialUrl: 'https://flutter.dev',
     );
   }
 }

【讨论】：