Flutter添加/移除任务后界面未更新，需热重载显示问题求助

问题根源 #

直接对taskList调用add/removeAt修改列表内容时，列表本身的引用并未改变。Flutter的ListView通过对比children的引用判断是否需要更新UI，当引用不变时，即使列表内容变化，框架也不会触发UI重建，导致界面不更新。

修复方案 #

方案1：修改列表时创建新实例 #

每次增删任务时，创建新的列表对象，让taskList的引用发生变化，setState后框架就能识别到数据源更新：

修改添加任务的按钮逻辑：

ElevatedButton(
  onPressed: () {
    setState(() {
      // 展开原列表并添加新任务，生成新列表
      taskList = [...taskList, Task(nome: 'New Task', diff: 1)];
    });
  },
  child: const Icon(Icons.add_task)),

修改删除任务的按钮逻辑：

ElevatedButton(
  onPressed: () {
    setState(() {
      if (taskList.isNotEmpty) {
        // 截取原列表前length-1个元素，生成新列表
        taskList = taskList.take(taskList.length - 1).toList();
        print(taskList);
      }
    });
  },
  child: const Icon(Icons.delete_sharp))

方案2：使用ListView.builder构建列表 #

改用ListView.builder懒加载列表项，它会根据itemCount的变化自动更新UI，同时提升长列表的性能：

替换原body中的ListView：

body: AnimatedOpacity(
  opacity: opacidade ? 1 : 0,
  duration: const Duration(milliseconds: 500),
  child: ListView.builder(
    itemCount: taskList.length,
    itemBuilder: (context, index) {
      return taskList[index];
    },
  ),
),

这种方式下，即使直接修改原taskList的内容，setState后itemCount（即taskList.length）发生变化，ListView.builder会重新构建对应的列表项，界面就能实时更新。

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