Flutter中调用setState为何部分Widget未重建更新？

问题原因 #

你说的没错，Flutter是声明式UI，但TextFormField的initialValue仅在组件第一次初始化时生效。当调用setState触发build重新执行时，若没有给TextFormField指定唯一的key，Flutter会复用之前的Element（组件的实例状态持有者），而Element会保留组件初始化后的输入状态，不会因为initialValue的变化而重新初始化组件内容。

而下方的Text组件是无状态组件，每次build都会根据最新的HtmlState.html.length重新构建，所以能正常显示更新后的值。

解决方案 #

有两种可行的解决方式，推荐使用第二种，更符合Flutter的状态管理规范：

方案一：给TextFormField添加动态Key

通过给TextFormField绑定一个随HtmlState.html变化的key，强制Flutter在值变化时销毁旧组件、创建新组件，从而应用新的initialValue：

Expanded(
  child: TextFormField(
    key: ValueKey(HtmlState.html), // 添加动态Key
    initialValue: HtmlState.html,
    maxLines: 100,
    onChanged: (value) => HtmlState.html = value,
  ),
)

方案二：使用TextEditingController（推荐）

initialValue只适合静态初始化，动态更新输入框内容应该使用TextEditingController，它能直接控制输入框的文本内容，且不需要依赖setState触发组件重建：

class HtmlEditorState extends State<HtmlEditor> {
  final tags = ["<br>", "<hr>", "<img>", "<b></b>", "<i></i>"];
  final tagButtons = <Widget>[];
  late TextEditingController _controller; // 声明控制器

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: HtmlState.html); // 初始化控制器
    for (var tag in tags) {
      var button = TextButton(
        onPressed: () {
          HtmlState.html += tag;
          _controller.text = HtmlState.html; // 直接更新控制器文本
        },
        child: Text(tag),
      );
      tagButtons.add(button);
    }
  }

  @override
  void dispose() {
    _controller.dispose(); // 销毁控制器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ButtonBar(
          children: tagButtons,
        ),
        Expanded(
          child: TextFormField(
            controller: _controller, // 使用控制器替代initialValue
            maxLines: 100,
            onChanged: (value) => HtmlState.html = value,
          ),
        ),
        Container(
          alignment: Alignment.bottomLeft,
          child: Text("Length: ${HtmlState.html.length}"),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 10, bottom: 50.0),
          child: TextButton(
            onPressed: () {
              DefaultTabController.of(context).animateTo(1);
            },
            child: const Text("See Results"),
          ),
        )
      ],
    );
  }
}

额外说明 #

另外，使用静态类HtmlState存储全局状态虽然能工作，但在复杂应用中容易导致状态管理混乱，推荐使用Flutter自带的StatefulWidget本地状态，或是Provider、Riverpod等状态管理库来管理输入框内容，让状态更可控。

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