Flutter 文本字段行为奇怪（使用错误的值更新）

Posted 2023-02-23

【中文标题】Flutter 文本字段行为奇怪（使用错误的值更新）

【英文标题】：Flutter textfield behaves strange (updating with the wrong value)

【发布时间】：2021-12-29 23:02:18

【问题描述】：

我遇到了与 TextFormField 相关的奇怪行为，因此我在父窗口小部件中维护了一个对象列表，我正在使用以下代码来呈现子窗口小部件列表

 children: <Widget>[
                        ...childProfiles
                            .map((e) => ChildProfileCard(
                                childProfile: e,
                                removeChildProfile: removeChildProfile))
                            .toList(),

而ChildProfileCard包含一个TextFormField，代码如下

TextFormField(
                        decoration: const InputDecoration(
                          contentPadding: EdgeInsets.only(top: 0),
                          hintText: "Enter child's name",
                        ),
                        validator: (value) 
                          if (value == null || value.isEmpty) 
                            return 'Name is required';
                          
                          return null;
                        ,
                      ),

有一个“删除”功能，可以简单地从列表中删除一项，如下所示

setState(() 
      childProfiles = childProfiles
          .where((childProfile) => childProfile.id != childProfileToRemove.id)
          .toList();
    );

当有两个以上项目（两个子小部件）时，我在第一个子小部件的TextFormField中输入了一些文本，然后我删除了第一个项目，文本将始终自动应用到第二个子小部件，是什么做的我做错了吗？我可以确认列表已正确更新，但文本表现异常。

在删除之前，您可以看到我们为不同的小部件设置了不同的文本

删除后，第一个小部件的文本被错误地复制到下一个小部件，您可以看到 uuid 是第二个小部件的。

【参考方案1】：

您应该在构建 ChildProfileCard 时使用任何唯一键

ChildProfileCard(key: Key(<ANY UNIQUE VALUE>),)

例子

ChildProfileCard(key: Key(e.id),)