Flutter 让软键盘不再自动弹起

这篇具有很好参考价值的文章主要介绍了Flutter 让软键盘不再自动弹起。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

2、问题解决:

FocusManager.instance.primaryFocus?.unfocus();

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

但是这里还有一个问题,稍微复杂一点的页面,可能会有很多按钮能显示弹窗或打开新页面,这样的话岂不是要在每一个按钮点击那里都写上那行代码?
当然,我们可以封装显示弹窗和页面跳转的方法,比如:

Flutter 让软键盘不再自动弹起,flutter,前端

image.png

这样,每次页面跳转都可以用这个open方法去执行。
至此,可以解决大部分情况了。

但是,还有一种特殊情况,如果该页面有引入某些第三方库显示弹窗内容的话,就又要封装一个方法去调用第三方库,毕竟直接调用第三方库是不会执行那行代码的。
比如第三方的一个DatePicker,一个选择日期时间的底部弹窗。
不能直接调用第三方方法,还要去封装一层,的确是有点麻烦了,所以,下面再介绍一个终极解决方法:

首先要引入第三方库: keyboard_utils: ^1.3.0
这个库可以用来监听软键盘的弹起和收起。
我们可以在监听到软键盘收起的时候执行下面这行代码

 FocusManager.instance.primaryFocus?.unfocus();

具体代码如下:文章来源地址https://www.toymoban.com/news/detail-632757.html

  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();
  }

到了这里,关于Flutter 让软键盘不再自动弹起的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter监听键盘输入做出反应

    2024年02月10日
    浏览(30)
  • flutter 调出键盘和监听输入

    调出键盘: 监听按键: 完整代码

    2024年02月10日
    浏览(32)
  • 轻松掌握Flutter中的键盘操作技巧

    嗨!这里是 甜瓜看代码 ,我们来聊聊如何避免你的用户在键盘弹起时受到惊吓。   我们都知道,在Flutter中,可以通过TextField或TextFormField来实现文本输入框。但是,这些输入框与键盘之间的交互可能会导致一些棘手的问题,例如键盘覆盖输入框、滚动问题等等。下面是一

    2024年02月11日
    浏览(33)
  • flutter聊天界面-自定义表情键盘实现

    flutter聊天界面-自定义表情键盘实现 flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 flutter开发基础腾讯IM的聊天应用,使用的是tencent_im_sdk_plugin插件。使用的是自定义表

    2024年02月13日
    浏览(38)
  • Flutter 桌面开发 | 键盘快捷键功能 - Shortcuts 组件

    在桌面端的开发中,键盘快捷键是非常常见而必要的,比如 Ctrl + F 搜索, Ctrl + C 复制等。Flutter 既然可以开发桌面端应用,那必然要提供自定义快捷键,触发事件的功能支持。这就是本节要介绍的 Shortcuts 组件体系,相关代码后续会放入 FlutterUnit 中,敬请关注 ~ 1. Shortcuts 组

    2024年02月05日
    浏览(56)
  • flutter开发实战-RawKeyboardListener监听键盘事件及keycode。

    flutter开发实战-RawKeyboardListener监听键盘事件及keycode。 最近开发过程中遇到外设备的按钮点击触发相应的操作,需要监听对应的keycode来开启游戏或者相关操作。 这里用到了RawKeyboardListener RawKeyboardListener是一个Widget,可以用来监听键盘的原始输入事件。 RawKeyboardListener属性 on

    2024年02月14日
    浏览(31)
  • Flutter 点击输入框后 键盘闪出后立刻消失

    flutter 在布局最顶端使用的是Scaffold组件,在点击输入框键盘弹出后,布局的默认反应是改变屏幕大小重新布局。 这时通常会在Scaffold中添加选项: resizeToAvoidBottomPadding:false 添加之后,应用整体布局不会随着键盘弹出而刷新改变。 但是键盘的弹出仍然会改变 MediaQuery.of(contex

    2024年02月09日
    浏览(33)
  • Flutter 解决App登录页面软键盘遮挡住登录按钮或顶起底部控件的问题

    问题点 最终效果图 问题点: 当前使用的是 Column 布局,弹窗软键盘后页面超出范围。 A RenderFlex overflowed by 0.533 pixels on the bottom. 解决方式 在 Scaffold 或者 CupertinoPageScaffold 中设置 resizeToAvoidBottomInset 为false 不修改 resizeToAvoidBottomInset 属性的话,可以使用 ListView 、 SingleChildScrol

    2024年02月04日
    浏览(42)
  • 【Flutter】Flutter 实现 Text 自动换行 解决长文本溢出问题

    你是否渴望成为 Flutter 的专家,掌握更多的技巧和最佳实践?我们有个好消息要告诉你! Flutter 从零到一 基础入门到应用上线全攻略 正在等待你的加入!这个专栏包含了你需要的所有 Flutter 学习资源,包括代码示例和深度解析。专栏内容会持续更新,价格也会随之上涨。现

    2024年02月12日
    浏览(27)
  • flutter 中实现前端的promise

    代码如下 使用方法 核心原理是 利用Future  和Completer。 Future 是异步无状态的 Completer可以返回Future 里面有3种状态 组合一下 就是前端的promise  用法改了一下 使用 Promise.run   =》Promise

    2024年02月21日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包