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

最新推荐文章于 2024-08-16 09:24:55 发布

qq_36392571

最新推荐文章于 2024-08-16 09:24:55 发布

阅读量3.9k

点赞数 1

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/qq_36392571/article/details/110198493

版权

本文探讨了在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{