Flutter保存sqflite表单数据后概览页不显示新条目，仅热重载后生效

• 概览页FutureBuilder的future参数直接写死了数据库查询方法，只会在页面首次构建时执行一次，从新增/编辑页返回时不会重新拉取最新数据。热重载会强制页面全量重建，触发查询执行，所以能看到更新后的数据。
• 新增/编辑操作完成后直接调用Navigator.pop返回概览页，没有通知概览页数据发生了变更，概览页不会主动刷新。
• 新增条目的插入操作没有加await，还没完成数据库写入就返回了概览页，拉取数据时还查不到刚插入的条目。

1. 调整启动概览页（CircleOverviewScreen）代码 #

首先将数据查询逻辑抽为独立方法，跳转返回后主动触发刷新：

class _CircleOverviewScreenState extends State<CircleOverviewScreen> {
  // 新增成员变量存储查询Future
  Future<List<Circle>>? _circlesFuture;

  @override
  void initState() {
    super.initState();
    // 页面首次加载时拉取数据
    _loadCircles();
  }

  // 抽离数据拉取方法
  void _loadCircles() {
    _circlesFuture = DatabaseHelper.instance.retrieveCircles();
  }

  // 抽离删除逻辑，删除后刷新
  void _deleteTodo(Circle circle) async {
    await DatabaseHelper.instance.deleteCircle(circle.id);
    _loadCircles();
    setState(() {});
  }

  // 抽离跳转逻辑，返回后刷新
  void _navigateToAddCircleScreen(BuildContext context, Circle? circle) async {
    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AddCircleScreen(circle: circle)),
    );
    // 从新增/编辑页返回后重新拉取数据
    _loadCircles();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cirkels'),
      ),
      body: FutureBuilder<List<Circle>>(
        // 替换为成员变量的Future
        future: _circlesFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(snapshot.data![index].gebeurtenis),
                  leading: Text(snapshot.data![index].id.toString()),
                  subtitle: Text(snapshot.data![index].gevolg),
                  onTap: () =>
                      _navigateToAddCircleScreen(context, snapshot.data![index]),
                  trailing: IconButton(
                      alignment: Alignment.center,
                      icon: Icon(Icons.delete),
                      onPressed: () async {
                        _deleteTodo(snapshot.data![index]);
                      }),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text("Je hebt nog geen 5G'tjes opgeslagen"));
          }
          return Center(child: CircularProgressIndicator());
        },
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Icon(Icons.create_sharp),
        // 跳转新增页调用抽离的方法
        onPressed: () => _navigateToAddCircleScreen(context, null),
      ),
    );
  }
}

2. 调整新增条目页（AddCircleScreen）代码 #

给新增操作加await，确保数据库写入完成后再返回：

_saveCircle(String gebeurtenis, String gevoel, String gedachten,
    String gedrag, String gevolg, String toelichting) async {
  if (circle == null) {
    // 新增await等待插入完成
    await DatabaseHelper.instance.insertCircle(Circle(
        gebeurtenis: gebeurtenisTextController.text,
        gevoel: gevoelTextController.text,
        gedachten: gedachtenTextController.text,
        gedrag: gedragTextController.text,
        gevolg: gevolgTextController.text,
        toelichting: toelichtingTextController.text));
    Navigator.pop(context);
  } else {
    await DatabaseHelper.instance.updateCircle(Circle(
        id: circle.id,
        gebeurtenis: gebeurtenis,
        gevoel: gevoel,
        gedachten: gedachten,
        gedrag: gedrag,
        gevolg: gevolg,
        toelichting: toelichting));
    Navigator.pop(context);
  }
}

同时保存按钮的setState调用可以删除，该操作仅刷新当前页，马上返回的场景下无实际作用。

修改完成后，新增、编辑、删除条目后返回概览页都会自动刷新最新数据。

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