Question

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

删除标签的过程非常顺利，但是当我使用TextField添加标签并按下键盘上的Submit按钮时，会发生奇怪的事情。我在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),
                  )
                ],
              ),
            ]
          ),
        )
      ],
    );
  }
}

an image of the actual app

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，它将重置。

使用SimpleDialog

1 个答案: