Flutter TextField 弹出软键盘导致界面重绘的问题

记录于2025-03-23

在做类似社区发表评论的功能，用了 TextField 作为输入框，
但是当弹出输入法时，界面在疯狂重绘，甚至其他页面也在疯狂重绘，导致部分元素重新播放了动画（例如带淡入动画的图片就会闪烁）、甚至重新调用了网络请求，直到输入法完全弹出时停止，以及输入法收起时也是上述情况。

然后我试着给当前页面和上级页面的 build 函数中使用 print 调试随便打印输出个文本，发现在弹出输入法时，build 函数确实在疯狂打印输出调试的文本。

翻到一篇文章：
Flutter 软键盘导致界面重绘的问题

在Scafford 中设置 resizeToAvoidBottomPadding: false,
然后就显示正常了。

按照上述方法进行尝试，发现虽然情况有所减缓，但依然会重绘很多次，而且输入框会被遮挡。

然后翻到该文章：
Flutter 小技巧之通过 MediaQuery 优化 App 性能

发现有可能是 MediaQuery.of 带来的问题，但是我将当前页面和上级页面的 MediaQuery.of 改成 MediaQueryData.fromView(View.of(context)) 的形式，依然没有效果，还是在疯狂重绘。

最后灵光一闪，才想到会不会是顶层元素的问题，因为当前页面和上级页面其实并不是最顶层，真正顶层的应该在 main.dart 入口开始，
翻阅 main.dart，果然发现了一句 MediaQuery.of(context).platformBrightness，这是用来判断亮色暗色的代码，我将其改成了 MediaQuery.platformBrightnessOf(context)，

自此，弹出软键盘将不会疯狂重绘了。

• 分类： Flutter
• 标签： 无标签