Flutter中 webview的键盘问题解决

Posted 2023-04-18

参考技术A webview的版本是webview_flutter: ^0.3.22+1

现在遇到的问题是如果webview中输入密码的话，像华为这种会调用自己的安全键盘，这时候就会黑屏，应该是内部计算键盘高度的问题。这时候没办法了，网页web端密码框需要修改一下了自己自定义一下不调用密码类型就好，但是无法被输入框弹上去，后来解决方案是用SingleChildScrollView包裹一下，然后自己监听一下键盘的弹窗和隐藏做一下jump的高度就好了

ps： jump的时候要注意高度，可以在键盘出来的时候底部增加一个只有高度的view，键盘收起隐藏就好了

Flutter Webview 关闭键盘

【中文标题】Flutter Webview 关闭键盘

【英文标题】：Flutter Webview Dismiss Keyboard

【发布时间】：2021-03-29 10:16:19

【问题描述】：

我通过Flutter WebView 将用户发送到付款表单。最后，收到付款后，我的 Flutter 应用程序收到一条消息，通知我购买已完成。此时显示的视图是订单摘要/收据。用户在填写付款表格后不会总是关闭键盘。我无法让键盘为他们自动关闭。

我只在 Android 模拟器和设备上进行了测试。键盘也不会关闭。

收到订单完成消息后，我将orderCompleted 变量的状态设置为true，这会触发重建，当true 调用FocusScope.of(context).unfocus(); 以尝试关闭键盘时。这是行不通的。我还在MobileOrderReceived 接收器函数中调用了这段代码，但它在那里也不起作用。

有什么想法可以解决这个问题吗？

这是我现在的构建函数：

bool orderCompleted = false;

@override
Widget build(BuildContext context) 
    if (orderCompleted) 
        FocusScope.of(context).unfocus(); // hides the keyboard when the order is received as successful  
    
    Set<JavascriptChannel> jsChannels = new Set<JavascriptChannel>();
    jsChannels.add(
        JavascriptChannel(
            name: "MobileOrderReceived",
            onMessageReceived: (JavascriptMessage receiver) async  
                print("Order Completed => $receiver.message");
                //  ...  code for saving to order history
                setState(() 
                    orderCompleted = true;
                );
            
        )
    );
    return Scaffold(
        appBar: appBar(context),
        body: mainContainer(
            WebView(
                initialUrl: widget.url, 
                debuggingEnabled: true,
                javascriptMode: JavascriptMode.unrestricted,
                javascriptChannels: jsChannels,
                onWebResourceError: (error) 
                    print("==> Web Resource Error <==");
                    print(error);
                ,
            )
        ),
        drawer: MainMenu.buildMenu(context),
    );

【参考方案1】：

FocusScope.of(context).requestFocus(FocusNode());

这条线可以让我以编程方式关闭键盘。

【讨论】：

我没有否决这个问题的任何答案。它一定是社区的另一个成员。

很抱歉造成误会。

【参考方案2】：

一种选择是使用FocusManager，更具体地说：

FocusManager.instance.primaryFocus.unfocus();