Flutter 键盘事件监听

时间 2019-11-17

标签 flutter 键盘事件监听繁體版

原文原文链接

前言

学习 MDC Flutter 教程的时候有一个登陆页面,一时好奇在 Flutter 中键盘弹出事件怎么监听,通过半天折腾终于找到一个比较完善的解决方案.ide

点击前往轮子学习

解决方案分析(只是分析逻辑,详细代码请参考轮子)

首先我找到了一个方法, WidgetsBindingObserver.didChangeMetrics动画

该方法可以获取到屏幕的改变(弹出键盘,旋转屏幕),在键盘弹出的一瞬间就会回调该方法,因而在输入框得到焦点的状况下我经过 ScrollController 将 ListView 滑动到最底部.ui

WidgetsBindingObserver

@override
void didChangeMetrics() {
    super.didChangeMetrics();
    if ((_usernameFocusNode.hasFocus || _passwordFocusNode.hasFocus) &&
        MediaQuery
            .of(context)
            .viewInsets
            .bottom > 50) {
      setState(() {
        _scrollController.animateTo(
          context.size.height - _listKey.currentContext.size.height,
          duration: Duration(
            milliseconds: 300,
          ),
          curve: Curves.decelerate,
        );
      });
    }
}
复制代码

发现没有效果,由于spa

Any active animation is canceled. If the user is currently scrolling, that action is canceled.code

也就是说在键盘弹出动画完成前咱们不能调用 ScrollController.animateToserver

无动画解决方案

@override
void didChangeMetrics() {
    super.didChangeMetrics();
    if ((_usernameFocusNode.hasFocus || _passwordFocusNode.hasFocus) &&
        MediaQuery
            .of(context)
            .viewInsets
            .bottom > 50) {
      setState(() {
        _scrollController.jumpTo(context.size.height - _listKey.currentContext.size.height);
      });
    }
}
复制代码

有动画解决方案

WidgetsBinding.addPersistentFrameCallback 这个方法可以完美得到每一帧绘制完成的回调,那么咱们在该回调下判断上一帧 viewInsets.bottom 的值是否和当前帧的 viewInsets.bottom 相同,若是相同表明键盘动画完成教程

@override
void didChangeMetrics() {
    _didChangeMetrics = true;
    super.didChangeMetrics();
}

_widgetsBinding.addPersistentFrameCallback((Duration timeStamp) {
    
  if (!_didChangeMetrics) {
    return;
  }

  _preBottomInset = _bottomInset;
  _bottomInset = MediaQuery.of(context).viewInsets.bottom;

  if (_preBottomInset != _bottomInset) {
    WidgetsBinding.instance.scheduleFrame();
    return;
  }

  _didChangeMetrics = false;
  bottomInsertComplete();
});
复制代码

在 bottomInsertComplete 就是键盘彻底弹出收回的回调,这时候咱们能够经过判断 viewInsets.bottom 的值来判断键盘的状态.事件