flutter解决方案：软键盘可见性问题

flutter键盘是否可见这个问题可以说是老大难了，尝试过MediaQuery.of(context).viewInsets.bottom获取键盘高度，此方式要求Scaffold(resizeToAvoidBottomInset: false)，否则获取的高度永远是0，但是一旦resizeToAvoidBottomInset: false键盘弹出时页面布局就不能被键盘顶起，导致页面底部的输入框被遮

csfchh

3170人浏览 · 2022-01-07 15:12:28

csfchh · 2022-01-07 15:12:28 发布

flutter键盘是否可见这个问题可以说是老大难了，尝试过MediaQuery.of(context).viewInsets.bottom获取键盘高度，此方式要求Scaffold(resizeToAvoidBottomInset: false)，否则获取的高度永远是0，但是一旦resizeToAvoidBottomInset: false键盘弹出时页面布局就不能被键盘顶起，导致页面底部的输入框被遮盖，这是不能接受的。从网上找到了解决方案，并简单封装了一下。

代码

资料：Get keyboard height in Flutter

mixin KeyboardLogic<T extends StatefulWidget> on State<T>,WidgetsBindingObserver {
  bool _keyboardVisible;
  
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    if (!mounted) return;
    final temp = keyboardVisible;
    if (_keyboardVisible == temp) return;
    _keyboardVisible = temp;
    onKeyboardChanged(keyboardVisible);
  }

  void onKeyboardChanged(bool visible);


  bool get keyboardVisible =>
      EdgeInsets.fromWindowPadding(
        WidgetsBinding.instance.window.viewInsets,
        WidgetsBinding.instance.window.devicePixelRatio,
      ).bottom >
      100;
}

使用方法

class DemoView extends StatefulWidget {

  const DemoView()

  @override
  _DemoViewState createState() => _DemoViewState();
}

class _DemoViewState extends State<DemoView> with WidgetsBindingObserver, KeyboardLogic {

  @override
  void onKeyboardChanged(bool visible) {
      // TODO deal with keyboard visibility change.
  }

}