flutter中键盘遮挡了webview_flutter中的输入框input解决办法

本文介绍了如何在iOS和Android系统中解决Flutter中webview_flutter的输入框被键盘遮挡的问题,包括iOS使用IOKeyboardManager类库调整和Android通过获取键盘状态并滚动webview的方法。
摘要由CSDN通过智能技术生成

1. iOS系统解决办法:(同时解决了闪屏问题,估计是iOS加入了IOKeyboardManager类库同时操作的问题)

参考flutter 中 键盘遮挡了webview_flutter中的输入框input 解决办法 - 简书

只需要将resizeToAvoidBottomInset设置为 false

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'https://www.baidu.com/',
        );
      }),
    );
  }

2. Android系统解决办法:

获取键盘状态,滚动webview

// 假设你需要滚动到特定的元素
                    _controller.evaluateJavascript('document.getElementById("inputElementId").scrollIntoView();');

我的处理方法更简单一点,针对特定的网页,直接滚动到一个固定的值,代码写在方法

Widget build(BuildContext context) {...}里面
    if(Platform.isAndroid&&widget.url.contains("common/User_feedback.html")&&MediaQuery.of(context).viewInsets.bottom>0) {
      Future.delayed(Duration(milliseconds: 100), () {
        _controller.scrollTo(0, 500);
      });
    }

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值