Flutter Dialog中TextField焦点变化导致SideBar意外重复重建问题

问题描述 #

调用showNewDialog打开包含TextField的对话框时，聚焦或失焦该TextField会触发SideBar多次重建（控制台打印多次"I AM CALLED"），但BaseLayout不会重建（无"ME TOO"输出）。采用Consumer模式，预期仅在调用notifyListeners()时才触发视图重建，无法理解当前触发原因。

复现细节 #

• 点击TextField设置焦点、弹出键盘时，触发多次SideBar重建
• TextField失焦时，出现相同的重建现象
• 点击对话框按钮或在TextField中输入文本时，不会触发SideBar重建

相关代码 #

// 完整代码见原文

日志输出 #

D/InputMethodManager(15863): showSoftInput() view=io.flutter.embedding.android.FlutterView{d6fdf5d VFE...... .F...... 0,0-1080,2296 #1 aid=1073741824} flags=0 reason=SHOW_SOFT_INPUT
I/AssistStructure(15863): Flattened final assist data: 384 bytes, containing 1 windows, 3 views
...
I/flutter (15863): I AM CALLED
I/flutter (15863): [INFO] 2024-04-23 07:49:07.461095: Get Entries from REST endpoint
...

原因分析与解决建议 #

1. MediaQuery变化触发重建（最可能原因） #

键盘弹出/收起会修改MediaQuery的viewInsets数据，若SideBar直接或间接依赖MediaQuery.of(context)获取布局参数（如padding、屏幕尺寸），且未通过const修饰、缓存机制或Consumer隔离无关依赖，会导致组件因MediaQuery变更而重建。而BaseLayout未依赖这类动态布局数据，因此不受影响。

解决方式：

• 检查SideBar的build方法，移除不必要的MediaQuery依赖；若必须使用，可将依赖MediaQuery的部分单独提取为子组件，并通过const修饰静态布局部分。
• 在initState中一次性获取并缓存MediaQueryData，避免每次build都重新获取。

2. Consumer监听范围冗余 #

若SideBar中Consumer监听的是整个状态对象，而非特定变量，可能因状态对象中某些无关变量被意外更新（如异步逻辑触发）导致重建。但BaseLayout未重建说明notifyListeners()未被触发，此可能性较低。

解决方式：

• 使用Consumer2/Consumer3等精准监听所需的状态变量，避免监听整个状态类。
• 检查状态类中是否存在未预期的notifyListeners()调用，尤其是与焦点、键盘相关的逻辑。

3. Build方法内的异步操作触发连锁反应 #

从日志可见，SideBar重建时触发了REST请求，说明build方法中存在直接执行的异步逻辑（如网络请求）。这类操作会加剧重建的负面影响，且可能因布局变化意外触发。

解决方式：

• 将异步操作移至initState、didChangeDependencies或使用FutureBuilder配合AsyncMemoizer缓存结果，避免每次build都重复执行。

4. 焦点变化的隐式上下文影响 #

TextField的焦点变化可能触发全局焦点树的更新，若SideBar依赖了与焦点相关的上下文数据，可能导致重建。

解决方式：

• 使用FocusManager.instance.addListener监听焦点变化，排查是否有意外的状态更新逻辑；若无需依赖焦点状态，移除相关上下文引用。

内容的提问来源于stack exchange，提问作者Der edle weiße Ritter