Flutter里怎么监听键盘弹起和收起事件？

Flutter监听键盘状态，WidgetsBindingObserver确实是正确思路，你没用对可能是漏了几个关键点。

核心逻辑是这样的：让State实现WidgetsBindingObserver，然后在didChangeMetrics()里检测viewInsets变化。

class ChatPage extends StatefulWidget {

  @override

  _ChatPageState createState() => _ChatPageState();

}



class _ChatPageState extends State with WidgetsBindingObserver {

  final ScrollController _scrollController = ScrollController();

  

  @override

  void initState() {

    super.initState();

    // 关键步骤1：注册observer

    WidgetsBinding.instance.addObserver(this);

  }

  

  @override

  void dispose() {

    // 关键步骤2：移除observer

    WidgetsBinding.instance.removeObserver(this);

    _scrollController.dispose();

    super.dispose();

  }

  

  @override

  void didChangeMetrics() {

    super.didChangeMetrics();

    // 关键步骤3：通过viewInsets判断键盘状态

    final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;

    final pixelRatio = WidgetsBinding.instance.window.devicePixelRatio;

    final keyboardHeight = bottomInset / pixelRatio;

    

    if (keyboardHeight > 0) {

      // 键盘弹起了，自动滚动到底部

      WidgetsBinding.instance.addPostFrameCallback((_) {

        if (_scrollController.hasClients) {

          _scrollController.animateTo(

            _scrollController.position.maxScrollExtent,

            duration: Duration(milliseconds: 200),

            curve: Curves.easeOut,

          );

        }

      });

    }

  }

  

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: ListView.builder(

        controller: _scrollController,

        itemCount: messages.length,

        itemBuilder: (context, index) => MessageBubble(message: messages[index]),

      ),

      bottomNavigationBar: _buildInputBar(),

    );

  }

  

  Widget _buildInputBar() {

    return Container(

      padding: EdgeInsets.only(

        // 关键步骤4：用MediaQuery把输入框顶上来

        bottom: MediaQuery.of(context).viewInsets.bottom,

      ),

      child: TextField(

        decoration: InputDecoration(hintText: '输入消息...'),

      ),

    );

  }

}

几个容易踩的坑提醒一下：

第一，addPostFrameCallback这个是必须的，因为键盘弹起时界面还没完全渲染好，直接scroll会失败。

第二，viewInsets.bottom单位是逻辑像素，需要除以devicePixelRatio才是真实高度。

第三，build方法里给输入框容器加padding-bottom用的是MediaQuery.of(context).viewInsets.bottom，这个不需你手动计算，Flutter会自动处理好。

如果觉得这套写法麻烦，可以直接用flutter_keyboard_visibility这个包，一行代码搞定：

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';



@override

Widget build(BuildContext context) {

  return KeyboardVisibilityBuilder(

    builder: (context, isKeyboardVisible) {

      if (isKeyboardVisible) {

        // 键盘弹起了

        _scrollToBottom();

      }

      return YourWidget();

    },

  );

}

不过原理都是一样的，建议先把WidgetsBindingObserver这套弄明白，后面遇到其他系统事件监听也容易上手。