Flutter 计算键盘高度以及打开关闭监听

一、缘由

Flutter弹窗里面有输入框,就会导致键盘顶起输入框.键盘弹起速度比较慢,所以看起来就是弹窗卡了.

解决这个问题有两个思路:

• 弹窗给一个bottomPadding,这个值跟随系统键盘高度(MediaQueryData.fromWindow(window).viewInsets.bottom)变化
• 在登录页面提前获取键盘高度,然后在需要弹窗的页面直接加上键盘高度
  我试了下方案一,其实还是有些卡顿,准备使用方案二解决.

二、实践思路

目前Flutter没有直接提供键盘高度和打开关闭的监听,所以我们需要自己封装一下.
主要思路是根据WidgetsBindingObserver中的didChangeMetrics方法不断监听键盘的高度.记录下,取出最大值即可.如果我们想要监听键盘完全打开或者关闭.就需要自己记录键盘高度的状态,bottom == 0时候键盘没展示,bottom == keyboardHeight表示键盘在最高位置.剩下都是就是弹出或者关闭的过程中.

用户可以手动改变键盘模式,例如改成手写,就会导致键盘变高,再从手写改成九键,会导致键盘变矮.变高我们任然是计算弹出最大值即可.变低这种情况不太好处理.我是判断了之前键盘是打开状态,然后在键盘变化的时候去延迟一下获取.由于键盘从手写变成九键很快,只需要稍微延迟,就能拿到变化后的值.

除了键盘高度计算,获取到键盘高度后保存本地,方便其他界面不去WidgetsBinding.instance.addObserver也能获取键盘高度.我还做了下键盘完全展开和关闭的监听.由于KeyBoardObserver是单列,也可以直接通过keyboardHeight字段获取键盘高度.

三、代码实现

import 'dart:math';
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:shared_preferences/shared_preferences.dart';

/// initState中添加 WidgetsBinding.instance.addObserver(KeyBoardObserver.instance);
/// dispose中添加 WidgetsBinding.instance.removeObserver(KeyBoardObserver.instance);
typedef FunctionType = void Function(bool changeToClose);

class KeyBoardObserver extends WidgetsBindingObserver {
  double keyboardHeight = 0;
  bool? isKeyboardShow;
  bool? _preKeyboardShow;
  static const KEYBOARD_MAX_HEIGHT = "keyboard_max_height";

  KeyBoardObserver._();

  static final KeyBoardObserver _instance = KeyBoardObserver._();

  static KeyBoardObserver get instance => _instance;

  FunctionType? listener;

  void addListener(FunctionType listener) {
    this.listener = listener;
  }

  @override
  void didChangeMetrics() {
    debugPrint("didChangeMetrics");
    final bottom = MediaQueryData.fromWindow(window).viewInsets.bottom;
    // 键盘存在中间态，回调是键盘冒出来的高度
    keyboardHeight = max(keyboardHeight, bottom);
    if (bottom == 0) {
      debugPrint("didChangeMetrics bottom == 0 keyboardHeight $keyboardHeight");
      isKeyboardShow = false;
    } else if (bottom == keyboardHeight || keyboardHeight == 0) {
      debugPrint("didChangeMetrics bottom == keyboardHeight bottom $bottom keyboardHeight $keyboardHeight");
      isKeyboardShow = true;
    } else {
      ///键盘打开和收起，都会走这里。
      debugPrint("didChangeMetrics isKeyboardShow == null  _preKeyboardShow $_preKeyboardShow bottom $bottom keyboardHeight $keyboardHeight");
      isKeyboardShow = null;

      ///当键盘之前处于打开的时候才需要获取
      if (_preKeyboardShow == true) {
        ///从手写切换到拼音，键盘会变小，这个时候无法判断，延迟一下，如果bottom 大于200，那么就是键盘高度。
        Future.delayed(const Duration(milliseconds: 10), () {
          final height = MediaQueryData.fromWindow(window).viewInsets.bottom;
          if (height > 200) {
            keyboardHeight = height;
            debugPrint("didChangeMetrics 掩饰200ms keyboardHeight $keyboardHeight  键盘高度 bottom $height");
            saveHeightToSp();
          }
        });
      }
    }

    ///展开和收起
    if (isKeyboardShow != null && _preKeyboardShow != isKeyboardShow) {
      double bottom = MediaQueryData.fromWindow(window).viewInsets.bottom;

      ///改变键盘为手写模式也会走这里，但是如果是手写改成9按键（键盘由高变小），不会走这里。
      debugPrint("didChangeMetrics 键盘完全收起或展开再刷新页面 bottom $bottom keyboardHeight $keyboardHeight");
      listener?.call(bottom == 0);

      ///收起时候保存键盘高度
      if (bottom == 0 && keyboardHeight != 0) {
        saveHeightToSp();
      }
    }
    _preKeyboardShow = isKeyboardShow;
  }

  Future<void> saveHeightToSp() async {
    final instance = await SharedPreferences.getInstance();
    instance.setDouble(KEYBOARD_MAX_HEIGHT, keyboardHeight);
  }
}