Flutter点击返回按钮时如何重新加载数据？

方案一：监听Navigator.push的返回值 #

Posts页面跳转到PostPage时，用await等待页面返回，之后重新触发数据请求：

修改Posts页面中跳转到PostPage的代码：

// 帖子列表项的点击事件
onTap: () async {
  // 等待PostPage关闭返回
  await Navigator.push(context, MaterialPageRoute(builder: (_) => PostPage()));
  // 重新获取帖子列表
  _initFuture();
  // 调用setState触发FutureBuilder重新构建
  setState(() {});
}

原理：从EditPost页面pop回到Posts页面时，await Navigator.push执行完毕，后续刷新代码触发，重新获取最新数据。

方案二：监听页面生命周期（通用场景） #

通过混入WidgetsBindingObserver监听页面可见状态，只要页面回到前台就自动刷新数据：

完整代码示例：

class _PostsPageState extends State<PostsPage> with WidgetsBindingObserver {
  late Future<List<Post>> _future;
  final PostsService _postsService = PostsService();

  @override
  void initState() {
    super.initState();
    // 注册页面生命周期观察者
    WidgetsBinding.instance.addObserver(this);
    _initFuture();
  }

  @override
  void dispose() {
    // 移除观察者，避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 当页面从后台回到前台时
    if (state == AppLifecycleState.resumed) {
      _initFuture();
      setState(() {});
    }
  }

  void _initFuture() {
    _future = _postsService.getUserPosts();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _future,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final post = snapshot.data![index];
              return ListTile(
                title: Text(post.title),
                trailing: IconButton(
                  icon: const Icon(Icons.edit),
                  onPressed: () async {
                    await Navigator.push(
                      context,
                      MaterialPageRoute(builder: (_) => PostPage(postId: post.id)),
                    );
                  },
                ),
              );
            },
          );
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        }
        return const CircularProgressIndicator();
      },
    );
  }
}

这种方法覆盖所有页面回到前台的场景，不管是从EditPost返回还是从后台切回，都会自动刷新数据。

补充说明 #

• 方案一针对性强，仅在从PostPage返回时刷新，适合流程明确的场景；
• 方案二更通用，适合需要全局刷新的场景；
• 若使用状态管理库（如Provider、Riverpod），可通过修改全局状态让Posts页面监听变化自动刷新，适合复杂多页面数据同步场景。

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