Flutter列表中TextField在列表更新时未同步更新问题求助

核心问题 #

你遇到的TextField显示异常，本质是Flutter列表Widget的复用机制导致的状态不更新：

• 你通过info.asMap().entries.map生成列表项时，没有给每个列表项指定唯一的Key。
• 当删除第一个元素后，原第二个元素的索引从1变为0，Flutter会默认认为这是同一个位置的Widget，直接复用原来第一个Widget的状态（包括TextField的输入值），即便后台数据已经更新。

修复方案 #

给每个列表项的Container添加基于item内容的唯一Key，让Flutter能准确识别不同的列表项，避免错误复用Widget状态。

修改后的代码如下：

Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: info.asMap().entries.map((el) => Container(
    // 添加唯一Key，基于item的内容
    key: ValueKey(el.value),
    margin: EdgeInsets.only(bottom: _gap),
    padding: EdgeInsets.all(_gap /2),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.grey,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Index ${el.value}'),
        ProductInfoInput(
          value: el.value,
          onChanged: (value) {
            print(value);
            setState(() {
              info[el.key] = value;
            });
          },
        ),
        SizedBox(height: _gap / 2),
        OutlinedButton(
          style: OutlinedButton.styleFrom(foregroundColor: Colors.red),
          onPressed: () {
            setState(() {
              info.removeAt(el.key);
            });
          },
          child: const Text('Remove'),
        ),
      ],
    ),
  )).toList(),
)

补充说明 #

• 如果你的el.value是可变的Map，也可以给每个item分配一个唯一标识（比如添加id字段），用ValueKey(el.value['id'])作为Key，这样稳定性更强。
• Flutter的Key核心作用就是在列表更新时帮助框架区分不同Widget，确保状态与数据同步。

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