Flutter 让软键盘不再自动弹起

1、问题说明:

在开发中,经常遇到这种事,一个页面有输入框,点击输入框后,会弹起软键盘,同时输入框会聚焦,手动收起软键盘后,点击另一个按钮前往下一个页面或者显示一个弹窗,返回或者关闭弹窗后,由于输入框仍然有焦点,软键盘又会自动弹起,非常影响使用体验。

2、问题解决:

Dart 复制代码
FocusManager.instance.primaryFocus?.unfocus();

在【点击另一个按钮前往下一个页面或者显示一个弹窗】这一步的时候执行一下上面那行代码,会清除焦点并收起软键盘。

但是这里还有一个问题,稍微复杂一点的页面,可能会有很多按钮能显示弹窗或打开新页面,这样的话岂不是要在每一个按钮点击那里都写上那行代码?

当然,我们可以封装显示弹窗和页面跳转的方法,比如:

image.png

这样,每次页面跳转都可以用这个open方法去执行。

至此,可以解决大部分情况了。

但是,还有一种特殊情况,如果该页面有引入某些第三方库显示弹窗内容的话,就又要封装一个方法去调用第三方库,毕竟直接调用第三方库是不会执行那行代码的。

比如第三方的一个DatePicker,一个选择日期时间的底部弹窗。

不能直接调用第三方方法,还要去封装一层,的确是有点麻烦了,所以,下面再介绍一个终极解决方法:

首先要引入第三方库: keyboard_utils: ^1.3.0

这个库可以用来监听软键盘的弹起和收起。

我们可以在监听到软键盘收起的时候执行下面这行代码

Dart 复制代码
 FocusManager.instance.primaryFocus?.unfocus();

具体代码如下:

Dart 复制代码
  KeyboardUtils _keyboardUtils = KeyboardUtils();

  @override
  void initState() {
    _keyboardUtils.add(
        listener: KeyboardListener(
            willHideKeyboard: () {
              FocusManager.instance.primaryFocus?.unfocus();
            },
            willShowKeyboard: (double keyboardHeight) {}));
    super.initState();
  }

  @override
  void dispose() {
    if (_keyboardUtils.canCallDispose()) {
      _keyboardUtils.dispose();
    }
    super.dispose();
  }
相关推荐
计算机魔术师4 分钟前
英伟达Q2营收翻倍,黄仁勋称实际需求远超70%指引
前端
计算机魔术师9 分钟前
英伟达129亿美元收购Hugging Face
前端
Shinner欣儿10 分钟前
React18 和 19 新特性结合看
前端·react.js
Java小卷1 小时前
低代码表单联动配置:从节点驱动到数据驱动
前端·低代码
DianSan_ERP1 小时前
WMS接入电商平台自动化履约实战:一张订单从平台到出库的接口时序设计
java·前端·网络·数据库·安全·架构·自动化
莪_幻尘1 小时前
手把手书写你的第一个 AI Agent:当 Skill 有了记忆、角色和主动性
前端·agent
原则猫2 小时前
设计模式
前端
光影少年2 小时前
react navite环境与工程化
前端·react native·react.js
PedroQue992 小时前
v2.6.0 新增全局返回守卫与 iOS 侧滑拦截,补齐跨端路由拦截能力
前端·uni-app
lichenyang4532 小时前
从「房间」到「实时通知」:用 NestJS + Socket.IO 实现团队邀请的完整工程实践
前端·后端