Flutter：我无法更新 Listview.builder

Question

我想以最简单的方式将一个项目添加到我的列表中，但它不会以某种方式改变。 它一定很简单，但不知何故我无法更新我的列表。 如果需要整个项目来解决这个问题，我可以分享 GitHub 链接。 这个项目是余安琪在 Udemy 上 flutter 课程的最后一个项目。

这是我的 add_task 屏幕：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:todoey/model/task.dart';
import 'package:todoey/model/task_bank.dart';

class AddTaskScreen extends StatefulWidget {
  const AddTaskScreen({Key? key}) : super(key: key);
  static const data = "Add Task";
  static const data2 = "Add";

  @override
  State<AddTaskScreen> createState() => _AddTaskScreenState();
}

class _AddTaskScreenState extends State<AddTaskScreen> {
  TextEditingController textEditingController = TextEditingController();
  TaskBank taskBank = TaskBank();
  String newTaskText = "";
  void addItem() {
    setState(() {
      taskBank.allTasks.add(
        Task(
          text: newTaskText,
          isDone: false,
        ),
      );
      textEditingController.clear();
    });
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFF757575),
      child: Container(
        padding: const EdgeInsets.all(20),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), topRight: Radius.circular(20)),
        ),
        child: Column(
          children: [
            const Text(
              AddTaskScreen.data,
              style: TextStyle(
                color: Colors.lightBlueAccent,
                fontSize: 30.0,
              ),
            ),
            TextField(
              controller: textEditingController,
              autofocus: true,
              textAlign: TextAlign.center,
              onChanged: (newText) {
                newTaskText = newText;
              },
            ),
            const SizedBox(height: 10),
            CupertinoButton(
              child: const Text(AddTaskScreen.data2),
              onPressed: () {
                addItem();
              },
              color: Colors.lightBlueAccent,
            )
          ],
        ),
      ),
    );
  }
}

这是列表视图

import 'package:flutter/material.dart';
import 'package:todoey/model/task_bank.dart';

class TasksListView extends StatefulWidget {
  const TasksListView({
    Key? key,
  }) : super(key: key);

  @override
  State<TasksListView> createState() => _TasksListViewState();
}

class _TasksListViewState extends State<TasksListView> {
  TaskBank taskBank = TaskBank();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20.0),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      child: ListView.builder(
        itemCount: taskBank.allTasks.length,
        itemBuilder: (context, index) {
          bool isChecked = taskBank.allTasks[index].isDone;
          return ListTile(
            title: Text(taskBank.allTasks[index].text),
            trailing: Checkbox(
              checkColor: Colors.lightBlueAccent,
              value: isChecked,
              onChanged: (newVlue) {
                setState(() {
                  isChecked
                      ? isChecked = taskBank.taskDidntDone(index)
                      : isChecked = taskBank.taskDone(index);
                });
                print(taskBank.allTasks.length);
              },
            ),
          );
        },
      ),
    );
  }
}

这些是我的模型。

 class Task {
  String text;
  bool isDone;
  Task({required this.text, this.isDone = false});
}

    import 'package:todoey/model/task.dart';

class TaskBank {
  List<Task> allTasks = [
    Task(
      text: "Complete to Listview Challange",
      isDone: false,
    ),
    Task(
      text: "Complate to Udemy Course",
      isDone: false,
    ),
  ];

  bool taskDone(int index) {
    return allTasks[index].isDone = true;
  }

  bool taskDidntDone(int index) {
    return allTasks[index].isDone = false;
  }
}

Answer 1

问题在这里TasksListView在单独的上下文中，并且 Ui 没有得到更新。 一个简单的解决方案是在TaskBank上传递TasksListView 。 我会鼓励你看看状态管理。

在dartPad上运行

class TasksListView extends StatefulWidget {
  final TaskBank taskBank;
  const TasksListView({
    Key? key,
    required this.taskBank,
  }) : super(key: key);

  @override
  State<TasksListView> createState() => _TasksListViewState();
}

class _TasksListViewState extends State<TasksListView> {
  late TaskBank taskBank;
  @override
  void initState() {
    super.initState();
    taskBank = widget.taskBank;
  }