Flutter InAppWebView 软键盘问题

Flutter InAppWebView 如何一进入就默认打开软件盘

webView和软件盘的问题,网上有很多很多的文章。找了很多,有用的没用的一大堆。

今天主要说一下 flutter InAppWebView中如何已进入就调去软键盘。

H5里面,无论是aotoFocus还时document.getElementById('xxx').focus();

在iOS还是android上都是无效的。当时就凉凉,不过解决这个问题iOS还是有办法的。

iOS

看了这个老哥的文章,分分钟解决了 blog.csdn.net/c_furong/ar…

在flutter iOS文件,由于InAppWebView用的是WKWebView,在appDelegate里面,执行下方法即可。代码是oc的 flutter已经给我们见好了桥文件,自己写个oc的class 转一下,在appDelegate调用一下即可

Andorid

接下来就是安卓,找了很多文章,最后终结于只能通过js的hander处理。InAppWebView与js的调用在这就好说了,只讲键盘的事。

1、调键盘,一定要用原生来调。那怎么用flutter里面直接掉原生的方法呢?

第一时间在 InAppWebViewController Api中找,找到了下面两个方法。

requestFocusNodeHref()
clearFocus()

clearFocus()一目了然,关闭键盘的。那requestFocusNodeHref()是干什么用的呢。

官方文档:请求回调得到 RequestFocusNodeHrefResult对象,在看看RequestFocusNodeHrefResult呢,貌似和键盘啥的没啥关系。那我要不把requestFocusNodeHref()的方法改了呢。直接open我的android studio。 这个这个回掉的地方,直接给改了。在我心里,requestFocusNodeHref()方法就应该是请求弹出键盘的,尽然他不是,那就让他是就好了。

image.png

找到InAppWebViewMethodHander。413行,直接换掉。

image.png

收到js软键盘打开的请求,直接来个controller.requestFocusNodeHref();搞定。

附上代码:收工!

case "requestFocusNodeHref":
  if (webView != null) {
      try {
        webView.requestFocus();
        InputMethodManager inputManager =
                (InputMethodManager) webView.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
        if (inputManager != null) {
          inputManager.toggleSoftInput(InputMethodManager.SHOW_FORCED,
                  InputMethodManager.HIDE_IMPLICIT_ONLY);
          result.success(true);
        }
      } catch (Exception e) {
        result.success(null);
      }
  } else {
    result.success(null);
  }
  break;

掘金地址:掘金https://juejin.cn/post/7028768149394685965/ 

Flutter中,可以通过使用`WidgetsBinding`来监听软键盘的弹起和收起事件,同时使用`SingleChildScrollView`来为布局进行滚动以适应软键盘的高度。 要实现软键盘弹起布局,可以按照以下步骤进行: 1. 导入必要的包: ```dart import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; ``` 2. 创建一个`StatefulWidget`,该组件将包含你的布局: ```dart class MyLayout extends StatefulWidget { @override _MyLayoutState createState() => _MyLayoutState(); } class _MyLayoutState extends State<MyLayout> { // 声明一个控制器来获取文本输入框的焦点 final FocusNode _focusNode = FocusNode(); // 监听软键盘状态 @override void initState() { super.initState(); // 在布局构建完成后开始监听软键盘事件 SchedulerBinding.instance.addPostFrameCallback((_) { _focusNode.addListener(() { if (_focusNode.hasFocus) { // 获取焦点时,键盘弹起 _scrollToBottom(); } }); }); } // 滚动到底部 void _scrollToBottom() { SchedulerBinding.instance.addPostFrameCallback((_) { Scrollable.ensureVisible( _focusNode.currentContext!, duration: const Duration(milliseconds: 300), ); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter软键盘弹起布局'), ), body: SingleChildScrollView( child: Column( children: <Widget>[ // your content here TextFormField( focusNode: _focusNode, // 将焦点设置给文本输入框 decoration: InputDecoration( labelText: '文本输入框', ), ), // more widgets... ], ), ), ); } } ``` 3. 在Flutter应用的入口处使用该布局: ```dart void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyLayout(), ); } } ``` 通过以上步骤,可以实现一个监听软键盘弹起的布局。当文本输入框获得焦点时,布局可以自动滚动到底部以适应软键盘的高度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值