乐趣区

flutter中如何监听键盘弹出关闭

jiezi

前言

最近在做公司 flutter 我的项目的时候，接到了一个需要，实质上就是实现收起键盘的时候让 TextField 组件失去焦点的性能。

这个需要乍一看很好解决，心想，就这！就这！就这！so easy！

然而！然而！然而！万万没想到啊，实现时候却让我原本就很粘稠的头发雪上加霜，起因就是安卓手机第三方输入法有一个很蛋疼的中央，就是他会有一个收起键盘的按钮，如下图所示：

问题就在，这！个！按！钮！他不属于原生键盘按钮，无奈检测到键盘事件！并且不可能屏蔽！???? 真的要给搞解体了。上面就给兄弟萌说说我最初的解题思路，心愿能有所帮忙！

解题思路

下面说过，键盘事件无奈监听，所以我只能另外想方法。能不能监听键盘敞开呢？通过一番查找，得出的答案是能够，那么就来搞一下！

keyboard_visibility

地址：https://pub.dev/packages/keyb…

这个库能够用来监听键盘的弹出和收起，援用库里的例子:

import 'package:keyboard_visibility/keyboard_visibility.dart';

@protected
void initState() {super.initState();

  KeyboardVisibilityNotification().addNewListener(onChange: (bool visible) {print(visible);
    },
  );
}

通常来讲，这个就齐全能够解决咱们的需要，然而！事件并没有这么简略！咱们在降级了 flutter 版本之后，发现无奈打包 apk，最初提醒是 keyboard_visibility 不！兼！容！查了一下材料发现，这个库应该是作者停更了，没有做到与时俱进，这咋整！

因为网上相干材料极少，迷信上网也不能立即解决我的问题，万般无奈之下，只能换个思路。那能不能监听界面的高度变动？通过查找材料，得出的论断是能够这样做的。

WidgetsBindingObserver & didChangeMetrics

这个组件能够监听页面的一些生命周期，并且其中有一个回调 didChangeMetrics 能够监听界面高度的变动。其中键盘的弹出和收起这些其实都属于高度的变动天然也是能够监听到的。

Nice！看到这里，那么咱们的解决方案也就有了，那就是设置一个 flag，辨别进去什么时候键盘弹出，什么时候键盘收起。

class _InputState extends State<Input> with WidgetsBindingObserver {
  // 输入框的焦点实例
  FocusNode _focusNode;
  // 以后键盘是否是激活状态
  bool isKeyboardActived = false;

  @override
  void initState() {super.initState();
    _focusNode = FocusNode();
   // 监听输入框焦点变动
    _focusNode.addListener(_onFocus);
    // 创立一个界面变动的观察者
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeMetrics() {super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 以后是安卓零碎并且在焦点聚焦的状况下
      if (Platform.isAndroid && _focusNode.hasFocus) {if (isKeyboardActived) {
          isKeyboardActived = false;
          // 使输入框失去焦点
          _focusNode.unfocus();
          return;
        }
        isKeyboardActived = true;
      }
    });
  }

  // 既然有监听当然也要有卸载，避免内存透露嘛
  @override
  void dispose() {super.dispose();
    _focusNode.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }

  // 焦点变动时触发的函数
  _onFocus() {if (_focusNode.hasFocus) {
      // 聚焦时候的操作
      return;
    }
    
    // 失去焦点时候的操作
    isKeyboardActived = false;
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: _focusNode,
      textInputAction: TextInputAction.done,
    );
  }
}

这样就功败垂成了，测试之后临时没发现什么大问题，还是比拟好用的。

参考文章

WidgetsBindingObserver 监测页面生命周期

Flutter 的生命周期 (交互)

结语

分享大略也就到这里了，这个问题前前后后花了好长时间解决，我真的太难了，当然可能也是因为我九折水瓶的缘故吧 … 这次分享进去，大家有需要的话也能做个参考。如果有什么更好的解决办法的话大家伙儿也教教我，笔芯笔芯。

说句题外话，在 flutter 开发的过程中，坑还是很多的，和共事聊天不止一次吐槽 flutter 的周边生态，真的是稀碎，比照隔壁的 RN 一言难尽。并且通过这个事件让我意识到，跨平台这货色用原生组件好解决的话，尽量不应用相干库，不然哪天再整几个兼容问题，不得把???? 整成一个卤蛋。

退出移动版