Flutter：我无法更新 Listview.builder

Question

我想以最简单的方式将一个项目添加到我的列表中，但它不会以某种方式更改。这一定很简单，但不知怎么的，我无法更新我的列表。如果需要整个项目来解决这个问题，我可以共享GitHub链接。这个项目是余在优迪美的最后一个项目。

这是我的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没有得到更新。一个简单的解决方案是在TasksListView上传递TaskBank。我鼓励你们关注国家管理。

在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;
}