Flutter中编辑TaskScreen任务后HomeScreen列表未实时更新

核心问题 #

1. 数据模型与UI组件耦合：你将Task同时作为数据模型和UI组件使用，Provider中存储的是Widget实例而非纯数据。当修改任务标题时，Widget内部的title变量不会自动更新，因为StatelessWidget无法响应自身属性的变化。
2. UI未监听数据变化：即使Provider调用了notifyListeners()，展示任务的Task Widget也没有依赖最新的数据源，因此不会触发重建。
3. Dismissible的Key存在风险：用任务标题作为Dismissible的key，修改标题后Key会变更，可能引发Flutter组件树的异常。

修复步骤 #

1. 拆分数据模型与UI组件 #

将Task改为纯数据类，单独编写TaskItem Widget负责UI展示：

// 纯数据模型
class Task {
  String title;
  // 可选：添加唯一ID作为稳定Key，避免标题修改引发异常
  // final String id;

  Task({required this.title/*, required this.id*/});
}

// UI展示组件
class TaskItem extends StatelessWidget {
  final Task task;

  const TaskItem({super.key, required this.task});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => {
        Navigator.of(context).pushNamed(
          '/task',
          arguments: task,
        ),
        FocusManager.instance.primaryFocus?.unfocus(),
      },
      child: Dismissible(
        // 建议用唯一ID作为Key，比如task.id
        key: Key(task.title),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.blue,
              width: 1,
              style: BorderStyle.solid,
            ),
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey[300],
          ),
          margin: const EdgeInsets.only(bottom: 8.0),
          child: ListTile(
            title: Text(
              task.title,
              style: const TextStyle(fontSize: 18),
            ),
            trailing: Wrap(
              spacing: 0,
              children: <IconButton>[
                IconButton(
                  padding: EdgeInsets.zero,
                  icon: const Icon(Icons.delete),
                  color: Colors.red,
                  onPressed: () => context.read<Tasks>().delete(task.title),
                ),
                IconButton(
                  padding: EdgeInsets.zero,
                  icon: const Icon(Icons.check),
                  color: Colors.green,
                  onPressed: () => {},
                )
              ],
            ),
          ),
        ),
        onDismissed: (direction) => context.read<Tasks>().delete(task.title),
      ),
    );
  }
}

2. 更新Tasks Provider逻辑 #

确保Provider存储纯数据类，并完善edit方法的安全性：

class Tasks with ChangeNotifier {
  final List<Task> _tasks = [];

  List<Task> get tasks => _tasks;

  void add(String title) {
    _tasks.add(Task(title: title));
    notifyListeners();
  }

  void delete(String title) {
    _tasks.removeWhere((element) => element.title == title);
    notifyListeners();
  }

  void edit(String? taskTitle, String newTaskTitle) {
    final taskIndex = _tasks.indexWhere((element) => element.title == taskTitle);
    // 避免找不到任务时抛出异常
    if (taskIndex != -1) {
      _tasks[taskIndex].title = newTaskTitle;
      notifyListeners();
    }
  }
}

3. 重构ListView构建逻辑 #

现在构建TaskItem组件，依赖Provider中的最新数据：

ListView.builder(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemCount: context.watch<Tasks>().tasks.length,
  itemBuilder: (context, index) {
    final task = context.watch<Tasks>().tasks[index];
    return TaskItem(task: task);
  },
)

额外优化建议 #

• 使用稳定Key：给Task添加唯一ID字段（如UUID），用ID作为Dismissible的key，避免标题修改后引发组件树异常。
• 封装数据操作：可以在Tasks中添加通过ID查找任务的方法，避免依赖标题作为唯一标识（标题可能重复）。

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