Flutter列表删除项后UI不更新问题求助

开发者阿泽

2026-7-12

问题解决：删除列表项后FutureBuilder不刷新UI

你的问题核心出在这几个关键点：

FutureBuilder的Future仅执行一次：直接把getItems()传给FutureBuilder的future参数，组件初始化时这个Future会被执行，但后续_items变化时，FutureBuilder不会重新触发——因为它绑定的还是最初的那个Future实例。
StatefulBuilder的setState作用域有限：对话框里的StatefulBuilder的setState只能更新对话框内部UI，无法触发外部FutureBuilder的重建。
单独调用getItems()无效：你在setState里调用getItems()只是返回了新列表，但没有让FutureBuilder重新监听新的Future。

修复步骤：

在页面的State类中把Future存为成员变量，方便控制更新：

late Future<List<Rung>> _itemsFuture;

@override
void initState() {
  super.initState();
  // 初始化时加载数据
  _itemsFuture = getItems();
}

将FutureBuilder的future参数替换为这个成员变量：

return FutureBuilder(
  future: _itemsFuture,
  builder: (BuildContext context, AsyncSnapshot<List<Rung>> snapshot) {
    if (snapshot.hasData) {
      return DefaultTabController(
        // 你的原有代码逻辑...
      );
    } else if (snapshot.hasError) {
      return Text('加载出错: ${snapshot.error}');
    } else {
      return const CircularProgressIndicator();
    }
  },
);

修改删除按钮的逻辑，先更新数据源、关闭对话框，再触发页面状态更新以重新加载Future：

ElevatedButton(
  onPressed: () {
    // 1. 从数据源移除目标项
    _items.removeAt(index);
    // 2. 关闭对话框
    Navigator.of(context).pop();
    // 3. 更新页面状态，重新创建Future触发FutureBuilder刷新
    setState(() {
      _itemsFuture = getItems();
    });
  },
  child: const Text('永久删除任务'),
)