使用 SimpleDialog 时状态被破坏

Question

我想在flutter中编写一个todo应用程序。 我的想法是，当您单击待办事项的标签时，您可以编辑该待办事项的标签。

删除标签完美无缺，但是当我使用TextField添加标签并按下键盘上的提交按钮时，会发生奇怪的事情。 我在TextField输入的“标签”被添加到标签列表中并出现以供删除（但只是一瞬间）。 TextField被清除，但附加标签消失并从标签列表中消失。 实际上整个TagsEditor都被重置了。 因此，即使我已经删除了旧标签，它们也会重新出现。 很奇怪...

经过一些试验，我发现随着键盘的消失， TagsEditor会被重置。 那可能有什么原因？ 我怎样才能防止这种情况？

class TagsEditor extends StatefulWidget {
  final List<String> tags;

  TagsEditor({this.tags});

  @override
  _TagsEditorState createState() => _TagsEditorState();
}


class _TagsEditorState extends State<TagsEditor> {
  @override
  Widget build(BuildContext context) {
    final tagAddController = new TextEditingController();
    return SimpleDialog(
      title: Text("Tags"),
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              TextField(
                controller: tagAddController,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'this is a tag',
                  labelText: 'add tag',
                ),
                maxLines: 1,
                onSubmitted: (String tag) {
                  setState(() { 
                    widget.tags.add(tag);
                    tagAddController.text = "";
                  });
                  print(widget.tags);
                },
              ),
              Container(
                height: 200.0,
                width: 300.0,
                child: ListView.builder(
                  padding: const EdgeInsets.all(8.0),
                  itemCount: widget.tags.length,
                  itemBuilder: (BuildContext context, int index) {
                    return OutlineButton(
                      child: Row(
                        children: <Widget>[
                          Icon(Icons.remove_circle),
                          Padding(padding: EdgeInsets.all(5.0),),
                          Text(widget.tags[index]),
                        ],
                      ),
                      onPressed: () {
                        setState(() {
                          widget.tags.removeAt(index);
                        });
                        print(widget.tags);
                      },
                    );
                  },
                ),
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  FlatButton(
                    child: Text("cancel"),
                    onPressed: () => Navigator.pop(context, null),
                  ),
                  FlatButton(
                    child: Text("submit"),
                    onPressed: () => Navigator.pop(context, widget.tags),
                  )
                ],
              ),
            ]
          ),
        )
      ],
    );
  }
}

实际应用程序的图像

Answer 1

取final tagAddController = new TextEditingController(); 在构建方法之外。

class _TagsEditorState extends State<TagsEditor> {
  final tagAddController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    ...
  }
}

发生了什么

每次构建应用程序时，您都在创建文本控制器。 例如，当您调用setState()时，应用程序会构建（它也出于更多原因而重新构建，这只是一个示例）。 每次调用setState ，都会调用 build 方法并因此重置表单字段值，因为您正在重新创建该值。

重要的！

当键盘消失时， TagsEditor被重置的原因是因为当键盘消失时应用程序重建，另一个原因是build方法被调用，并且由于您正在重新创建TextEditingController ，它会重置。