Flutter点击TextField唤起键盘卡顿，resizeToAvoidBottomInset设置无效

问题现象 #

基于flutter/material.dart开发的聊天类项目，点击TextField唤起键盘时出现明显掉帧卡顿，设置Scaffold(resizeToAvoidBottomInset: false)后问题未得到解决。

核心卡顿原因 #

从提供的代码来看，卡顿由以下几个问题共同导致：

• 顶层build方法直接监听MediaQuery.of(context).viewInsets.bottom获取键盘状态，键盘弹出过程中viewInsets数值逐帧变化，会触发整个页面全量逐帧重建，页面嵌套的大量重组件（两层Scaffold、Stack、ScopedModel、消息列表、背景图）逐帧重绘会直接占满UI线程导致掉帧。
• 页面存在冗余的嵌套Scaffold结构，两层Scaffold会同时响应系统窗口变化，重复执行布局计算，额外增加性能开销。
• build方法中直接执行updateLocalUserData(_model)这类非渲染逻辑，每次页面重建都会重复执行，占用主线程资源。
• 背景图未做缓存，每次build都会重新创建ImageProvider实例，逐帧重建时反复触发图片解码，消耗大量IO与GPU资源。
• 若消息列表未做按需加载、重绘隔离，键盘弹出触发的页面重排会进一步放大卡顿。

分步修复方案 #

1. 缩小键盘状态监听范围，避免全页逐帧重建 #

不要在页面顶层build方法中通过MediaQuery获取键盘状态，将键盘状态监听逻辑下沉，避免viewInsets逐帧变化触发全页重建：

// 在initState中初始化键盘监听，仅更新输入区所需状态
bool _keyboardVisible = false;

@override
void initState() {
  super.initState();
  // 通过WidgetsBindingObserver实现键盘监听，无需引入额外依赖
  WidgetsBinding.instance.addObserver(this);
}

@override
void didChangeMetrics() {
  final bottomInset = WidgetsBinding.instance.window.viewInsets.bottom;
  final newVisibleState = bottomInset > 0;
  if (newVisibleState != _keyboardVisible && mounted) {
    setState(() {
      _keyboardVisible = newVisibleState;
      if (newVisibleState) isemojiShowing = false;
    });
  }
}

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

注意：键盘状态只需要在显示/隐藏两个状态切换时更新即可，不需要跟随弹出动画逐帧更新。

2. 移除冗余嵌套Scaffold #

删除Stack中嵌套的内层Scaffold，仅保留最外层单个Scaffold，将resizeToAvoidBottomInset属性配置到外层Scaffold上，避免多层Scaffold重复响应窗口变化、重复计算布局。
错误结构参考：

// 错误：两层嵌套Scaffold
Stack(
  children: [
    Scaffold(/*外层Scaffold*/),
    Scaffold(/*内层冗余Scaffold*/)
  ]
)

调整为单Scaffold结构，内层内容直接通过Column、Stack等组件排布即可。

3. 剥离build方法中的非渲染逻辑 #

将updateLocalUserData(_model)这类数据同步、业务逻辑从build方法中移除，移至initState、Model监听回调等仅执行一次的位置，build方法仅保留纯UI渲染逻辑，避免每次重建重复执行无关代码。

4. 预缓存背景图片 #

提前在initState中初始化并预缓存背景图，不要在build方法中反复创建ImageProvider实例：

late ImageProvider _chatBgImage;

@override
void initState() {
  super.initState();
  // 初始化背景图
  _chatBgImage = peer?[Dbkeys.wallpaper] == null
      ? const AssetImage("assets/images/background.png")
      : FileImage(File(peer![Dbkeys.wallpaper]));
  // 预缓存图片到内存
  precacheImage(_chatBgImage, context);
}

// build方法中直接使用缓存好的实例
Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: _chatBgImage,
      fit: BoxFit.cover,
    ),
  ),
)

5. 优化消息列表渲染性能 #

• 消息列表必须使用ListView.builder按需构建列表项，禁止使用Column一次性渲染所有历史消息。
• 给ListView配置addRepaintBoundaries: true、addAutomaticKeepAlives: false属性，隔离每个消息项的重绘范围。
• 给复杂消息项包裹RepaintBoundary组件，避免单个消息项重绘影响整个列表。

6. 额外排查项 #

如果完成以上优化后仍有卡顿，可通过Flutter DevTools的Performance面板查看帧栈，重点排查：

• 是否在build方法中重复创建TextEditingController、FocusNode等输入相关对象
• 键盘弹出时是否有同步执行的耗时IO、数据计算逻辑
• 列表中的网络图片、本地图片是否未做缓存，导致重绘时重复解码

验证标准 #

优化完成后，键盘弹出过程中页面整体build次数应降至2次以内（键盘弹出开始、结束各一次），不会跟随动画逐帧重建，掉帧问题即可解决。

内容的提问来源于stack exchange，提问作者Mr. Dandomi