Flutter中TextField调用setState修改单状态时其他状态被异常修改

这个串值是Flutter组件复用机制的典型问题：

• 两个页面的Field（封装的TextField）是同类型组件，又没设置唯一标识Key，Flutter在切页触发组件树diff时，会默认复用同位置同类型组件的旧状态，直接把上一页输入的agentName带到下一页输入框里。
• 你现在只靠onChanged回调存变量，既没给输入框绑定独立控制器，也没给分页做状态隔离，切页时输入框的内置编辑状态不会自动和你存的变量对齐，很容易出现显示值和实际存储值不匹配的问题。

按下面的步骤改就能彻底解决，优先级从高到低：

• 给每个输入框配独立的TextEditingController，和输入框一一绑定，从根源避免内容串用
• 给每个Screen、每个Field设置全局唯一Key，明确告诉Flutter这些是独立组件，不要跨页复用状态
• 切页触发setState前，主动同步一次输入框的内容，避免焦点切换时onChanged没触发导致的值丢失

首先在对应State类里声明独立控制器并做好资源释放：

// 声明两个和输入框一一对应的控制器
late final TextEditingController agentNameController = TextEditingController();
late final TextEditingController clientNameController = TextEditingController();

String agentName = '';
String clientName = '';
int index = 0;

// 页面销毁时释放控制器，避免内存泄漏
@override
void dispose() {
  agentNameController.dispose();
  clientNameController.dispose();
  super.dispose();
}

修改后的页面组件代码如下：

Screens(
  index: index,
  children: [
    // 给每个Screen加PageStorageKey做页面状态隔离
    Screen(
      key: const PageStorageKey('agent_screen'),
      child: Column(
        children: [
          Field(
            // 给输入框加唯一ValueKey，避免组件复用
            key: const ValueKey('agent_name_input'),
            controller: agentNameController,
            onChanged: (String value) {
              agentName = value;
            },
          ),
          ScreenButtons(
            previous: () => setState(() => index--), 
            next: () {
              // 切页前主动同步值，避免焦点变化导致值未提交
              agentName = agentNameController.text;
              setState(() => index++);
            }, 
            index: index, 
            length: 2
          )
        ]
      )
    ),
    Screen(
      key: const PageStorageKey('client_screen'),
      child: Column(
        children: [
          Field(
            key: const ValueKey('client_name_input'),
            controller: clientNameController,
            onChanged: (String value) {
              clientName = value;
            },
          ),
          ScreenButtons(
            previous: () {
              clientName = clientNameController.text;
              setState(() => index--);
            }, 
            next: () => setState(() => index++), 
            index: index, 
            length: 2
          )
        ]
      )
    )
  ]
);

如果你封装的Field组件没有对外暴露key和controller参数，记得先补上，透传到内部的TextField上，不然上面的改动不会生效。
嫌写控制器麻烦的话，最次也要给两个Field分别设不同的ValueKey，能解决绝大多数组件复用导致的串值问题，但用控制器的方案更稳，后续做表单默认值填充、清空重置都更方便。

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