flutter 按钮固定底部和键盘弹出问题

本文探讨了在Flutter应用中如何确保底部按钮在键盘弹出时不被覆盖,同时保持输入框可见并允许页面滚动。尝试了多种方案,包括界面观察者、flutter_keyboard_visibility插件等,最终通过修改键盘避免器源码实现需求,解决了焦点管理和页面空白区域问题。
摘要由CSDN通过智能技术生成

需求:按钮固定底部,键盘弹出,不能覆盖输入框,并且能滚动页面。

解决方法过程:

方案一:

resizeToAvoidBottomPadding: false, //输入框抵住键盘

结果:点击最底部输入框被键盘覆盖。

方案二:使用界面变化的观察者

WidgetsBinding.instance.addObserver(this) 
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_focusNode.hasFocus) {
        print('isKeyboardActived1${isKeyboardActived}');
        if (isKeyboardActived) {
          print('键盘收起$_key');
          isKeyboardActived = false;
          // 使输入框失去焦点
          _focusNode.unfocus();
          eventBus.fire(new InputStateEvent(''));
          if (widget.onLostFocus != null) {
            widget.onLostFocus();
          }
          return;
        }
        print('键盘弹起$_key');
        if (widget.onFocus != null) {
          widget.onFocus();
        }
        isKeyboardActived = true;
      }
      else {
        if (isKeyboardActived) {
          print('键盘收起$_key');
          isKeyboardActived = false;
          // 使输入框失去焦点
          _focusNode.unfocus();
          if (widget.onLostFocus != null) {
            widget.onLostFocus();
          }
        }
      }
    });
  }

结果:有个页面中对输入框存在其他操作,所以有两种输入框组件,每个输入框都写入这个方法。

使用这个出现的问题:

(1)、焦点从一个输入框组件到另一个输入框组件,再次切换回去,无法聚焦

(2)、快速在一个输入框进行失焦,聚焦,过段时间,输入框再也无法聚焦

(3)、ios中,didChangeMetrics,切换输入框就会调用一次。

方案三:使用flutter_keyboard_visibility控件,通过监听输入框隐藏显示按钮,

StreamSubscription _subscription;
    _subscription = KeyboardVisibility.onChange.listen((bool visible) {
      setState(() {
        keyboardShow = visible;
      });
      if(visible){
        if(hasFocus()){
          if(widget.onFocus != null){
            widget.onFocus();
          }
        }
      }else{
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值