Flutter跨类修改待办列表状态后UI无法实时更新问题

• Dart内置List的add()方法返回值为void，remove()方法返回值为被删除的元素，两者都不会返回修改后的列表对象
• 你在调用callback时直接传入了add/remove的返回值，导致setState执行时，给状态变量TodoList赋了错误的值，没有触发正确的界面重绘
• 内存中实际的列表数据已经被修改，所以热重载重新构建页面时会读取到修改后的数据，才会显示更新后的列表

1. 修改AddButton组件的点击逻辑 #

将原来的点击回调：

onTap: () {
    callback(TodoList.add('toDo: '+ (TodoList.length + 1).toString()));                 
},

替换为：

onTap: () {
    // 先修改列表数据
    TodoList.add('toDo: ${TodoList.length + 1}');
    // 把修改后的完整列表传给回调
    callback(TodoList);                
},

2. 修改TodoTasks组件的删除逻辑 #

将原来的删除回调：

onTap: () {
    callback(TodoList.remove(TodoList[index]));
},

替换为：

onTap: () {
    // 按索引删除更准确，避免列表有重复内容时删错元素
    TodoList.removeAt(index);
    // 把修改后的完整列表传给回调
    callback(TodoList);
},

修改后点击新增、删除按钮就会实时触发界面更新，不需要依赖热重载。

内容的提问来源于stack exchange，提问作者smileawe123