Flutter中Form状态变更后TextFormField字体颜色不更新的原因探究

核心逻辑：Flutter的Widget更新机制 #

Flutter里的Widget是不可变的配置对象，当调用setState触发UI更新时，会重新执行build方法生成新的Widget树。Flutter通过对比新旧Widget的runtimeType、key以及属性值，判断是否需要更新对应的Element（Widget与RenderObject之间的中间层），进而更新UI。

代码1：每次build重新创建Form实例 #

这种写法下，每次build都会生成一个全新的Form Widget实例，并且会把最新的_isAnswerCorrect值传递给NumberInputField。

• 当setState修改_isAnswerCorrect后，新生成的Form Widget携带了更新后的参数，Flutter对比新旧Widget时会发现属性变化，触发Form对应的Element更新。
• Element更新时会重新构建子组件NumberInputField，新的isAnswerCorrect参数会传递进去，TextFormField的字体颜色随之更新。

代码2：复用首次创建的Form实例 #

如果把Form实例存在State的成员变量中（比如在initState里初始化，之后build直接返回这个实例），那么每次build返回的都是同一个旧的Form Widget实例。

• 这个实例在创建时就固定了传递给NumberInputField的_isAnswerCorrect值，后续setState修改变量后，Form实例本身的参数并没有更新。
• Flutter对比新旧Widget时，发现是同一个实例（类型、key、属性都没变化），不会触发Element更新，子组件NumberInputField也就收不到新的参数，字体颜色自然不会改变。

关键总结 #

不要将需要随状态变化的Widget存在State的成员变量中，必须在build方法里根据当前最新状态生成对应的Widget配置，这样Flutter才能感知到变化并更新UI。

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