Flutter中MediaQuery的使用利弊与聊天场景适配优化方案咨询

首先明确：不会重建整个组件树，但会重建所有直接依赖MediaQuery.of(context)的Widget。因为MediaQuery是一个InheritedWidget，只有依赖它的Widget会在其数据变化时触发重建——如果你的底部弹窗只是局部使用它，那影响范围很小；但如果整个页面的很多Widget都依赖它，那确实会有不必要的重建开销。

针对聊天APP底部弹窗适配键盘的场景，推荐以下最佳实践：

1. 用MediaQuery.viewInsets.bottom替代size #

键盘弹出/收起时，系统会更新MediaQuery.of(context).viewInsets.bottom的值，这个值就是键盘的实际高度，比监听size更精准（size变化可能来自屏幕旋转等其他场景）。

2. 用AnimatedBuilder避免不必要重建 #

直接在build里调用MediaQuery会导致当前Widget重建，而AnimatedBuilder可以只重建需要更新的部分：

class ChatBottomBar extends StatelessWidget {
  const ChatBottomBar({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      // 监听viewInsets的变化（键盘弹出/收起是动画过程）
      animation: MediaQuery.of(context).viewInsets,
      builder: (context, child) {
        // 只有这个builder内的代码会在viewInsets变化时重建
        return Positioned(
          bottom: MediaQuery.of(context).viewInsets.bottom,
          left: 0,
          right: 0,
          child: child!,
        );
      },
      // 这个child不会被重建，把你的输入框/按钮放在这里
      child: Container(
        height: 60,
        color: Colors.white,
        child: Row(
          children: [
            Expanded(child: TextField(decoration: InputDecoration(hintText: "输入消息"))),
            IconButton(onPressed: () {}, icon: Icon(Icons.send)),
          ],
        ),
      ),
    );
  }
}

这样，只有Positioned会在键盘变化时重建，而输入框所在的Container完全不会被重新构建，开销极小。

3. 利用Scaffold的原生属性 #

如果你的底部输入框是放在Scaffold的bottomNavigationBar或者body里，可以直接设置Scaffold的resizeToAvoidBottomInset: true（默认就是true），它会自动调整body的布局，让输入框不被键盘遮挡，不需要手动监听MediaQuery。

4. 手动监听键盘状态（进阶方案） #

如果你需要更精细的控制，可以通过WidgetsBindingObserver监听键盘状态：

class ChatPage extends StatefulWidget {
  const ChatPage({super.key});

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> with WidgetsBindingObserver {
  double _keyboardHeight = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

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

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;
    setState(() {
      _keyboardHeight = bottomInset;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: // 聊天消息列表
      bottomSheet: Positioned(
        bottom: _keyboardHeight,
        child: YourInputWidget(),
      ),
    );
  }
}

这种方式需要手动管理监听和状态，但可以在键盘变化时做额外逻辑（比如滚动消息列表到底部）。

总结：优先用AnimatedBuilder + viewInsets的组合，既精准又能避免不必要的重建；如果是简单场景，直接依赖Scaffold的原生属性即可。

内容的提问来源于stack exchange，提问作者zaid khan