时间戳

首页 > 解决方案 > 每次创建新的待办事项时，标题和描述的值都会重复

flutter - 每次创建新的待办事项时，标题和描述的值都会重复

问题描述

我刚开始学习flutter并正在尝试创建一个待办事项应用程序，但是每次制作新的待办事项时，标题的值和所有待办事项的描述都保持​​不变，我尝试了所有方法，但没有区别请告诉我是什么代码错误，如何保存每个待办事项的标题和描述的值？我的代码：

class _HomePageState extends State<HomePage> {
  TextEditingController _titleController = TextEditingController();
  TextEditingController _detailController = TextEditingController();
  List todos = [];

  @override
  void initState() {
    super.initState();
    todos.add('');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(
            horizontal: 24.0,
          ),
          color: const Color(0xfff6f6f6f6),
          child: Stack(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    margin: const EdgeInsets.only(bottom: 32.0, top: 32.0),
                    child: const Text(
                      "Reminders",
                      style: TextStyle(
                        fontSize: 25.0,
                        fontWeight: FontWeight.bold
                      ),
                    ),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: todos.length,
                      physics: const BouncingScrollPhysics(),
                      itemBuilder: (BuildContext context, int index) {
                        return Dismissible(
                          key: Key(todos[index]),
                          child: Container(
                            width: double.infinity,
                            padding: const EdgeInsets.symmetric(
                                vertical: 20.0,
                                horizontal: 24.0
                            ),
                            margin: const EdgeInsets.only(
                              bottom: 20.0,
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                TextField(
                                  cursorColor: Colors.black,
                                  autofocus: true,
                                  controller: _titleController,
                                  style: const TextStyle(
                                      fontSize: 22.0,
                                      fontWeight: FontWeight.bold
                                  ),
                                  decoration: const InputDecoration(
                                    hintText: "Enter a title",
                                    border: InputBorder.none,
                                  ),
                                ),
                                const Divider(
                                  color: Colors.black,
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(top: 0.0),
                                  child: TextField(
                                    controller: _detailController,
                                    style: TextStyle(
                                      fontSize: 20.0,
                                      color: Colors.grey[900],
                                    ),
                                    cursorColor: Colors.black,
                                    maxLines: null,
                                    decoration: const InputDecoration(
                                        hintText: "Enter the description",
                                        label: Text("description"),
                                        border: InputBorder.none
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(20.0)
                            ),
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),
              Positioned(
                bottom: 24.0,
                right: 0.0,
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      todos.add('');
                    });
                  },
                  child: Container(
                  width: 60.0,
                  height: 60.0,
                  decoration: BoxDecoration(
                    color: Colors.black87,
                    borderRadius: BorderRadius.circular(20.0),
                  ),
                  child: const Icon(Icons.add, color: Colors.white, size: 35.0),
              ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

标签： flutterdart

解决方案

您好，欢迎来到 Flutter 的世界，

就像你对标题和细节所做的那样，每个文本字段都需要它自己的 TextEditingController。所以你可以为标题和描述添加一个控制器列表。

List<TextEditingController> _titleController = [];
List<TextEditingController> _detailController = [];

并在添加 todo 时向两者添加一个条目。

todo.add('')
_titleController.add(TextEditingController())
_detailController.add(TextEditingController())

在 TextFields 中，您应该按索引引用：

 ...
 child: TextField(controller: _detailController[index],
 ...

这应该有助于解决您的问题。

我建议您查看一些教程并尝试重建它们。

玩得开心！

推荐阅读