Flutter：PushReplacement后如何捕获第二页Future并刷新页面

问题根源在于pushReplacement会将当前的XYZPage从导航栈中移除并替换为ABCPage，这会直接触发原页面中push方法返回的Future完成，导致then回调提前执行。要实现ABCPage结束时刷新原页面，有以下几种可行方案：

方案一：通过路由传递回调 #

这种方式直接在页面间传递刷新回调，逻辑清晰，适合简单场景：

原页面代码 #

class OriginalPage extends StatefulWidget {
  const OriginalPage({super.key});

  @override
  State<OriginalPage> createState() => _OriginalPageState();
}

class _OriginalPageState extends State<OriginalPage> {
  // 定义页面刷新方法
  void _refreshCurrentPage() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () {
          // 跳转时将刷新回调传递给XYZPage
          Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => XYZPage(onNeedRefresh: _refreshCurrentPage),
          ));
        },
        child: const Text('跳转到XYZPage'),
      ),
    );
  }
}

XYZPage代码 #

class XYZPage extends StatelessWidget {
  final VoidCallback onNeedRefresh;

  const XYZPage({super.key, required this.onNeedRefresh});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () {
          // pushReplacement时将回调传递给ABCPage
          Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (context) => ABCPage(onNeedRefresh: onNeedRefresh),
          ));
        },
        child: const Text('跳转到ABCPage'),
      ),
    );
  }
}

ABCPage代码 #

class ABCPage extends StatelessWidget {
  final VoidCallback onNeedRefresh;

  const ABCPage({super.key, required this.onNeedRefresh});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () {
          // 关闭ABCPage后触发原页面刷新
          Navigator.of(context).pop();
          onNeedRefresh();
        },
        child: const Text('返回'),
      ),
    );
  }
}

方案二：使用自定义NavigatorObserver #

通过监听导航栈的弹出事件，在ABCPage被弹出时触发原页面刷新，无需传递回调：

自定义Observer #

class RefreshObserver extends NavigatorObserver {
  final VoidCallback onRefresh;

  RefreshObserver({required this.onRefresh});

  @override
  void didPop(Route route, Route? previousRoute) {
    super.didPop(route, previousRoute);
    // 判断弹出的路由是否为ABCPage（可通过路由名或页面类型判断）
    if (route.settings.name == '/abc_page') {
      onRefresh();
    }
  }
}

注册Observer并关联原页面 #

// 全局定义原页面的GlobalKey
final GlobalKey<_OriginalPageState> _originalPageKey = GlobalKey();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [
        RefreshObserver(onRefresh: () {
          // 触发原页面刷新
          _originalPageKey.currentState?._refreshCurrentPage();
        })
      ],
      routes: {
        '/abc_page': (context) => const ABCPage(),
      },
      home: OriginalPage(key: _originalPageKey),
    );
  }
}

// 原页面保持方案一中的结构，仅需绑定GlobalKey
class OriginalPage extends StatefulWidget {
  const OriginalPage({super.key}) : super(key: _originalPageKey);

  @override
  State<OriginalPage> createState() => _OriginalPageState();
}

方案三：使用状态管理工具（以Provider为例） #

适合中大型项目，通过全局状态通知原页面刷新，避免层级传递回调的繁琐：

定义状态通知类 #

class RefreshNotifier extends ChangeNotifier {
  void triggerRefresh() {
    notifyListeners();
  }
}

在App层级提供状态 #

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => RefreshNotifier(),
      child: MaterialApp(
        home: const OriginalPage(),
      ),
    );
  }
}

原页面监听状态 #

class OriginalPage extends StatelessWidget {
  const OriginalPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 监听状态变化，自动刷新页面
    return Consumer<RefreshNotifier>(
      builder: (context, notifier, child) {
        return Scaffold(
          body: ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => const XYZPage(),
              ));
            },
            child: const Text('跳转到XYZPage'),
          ),
        );
      },
    );
  }
}

ABCPage触发刷新 #

class ABCPage extends StatelessWidget {
  const ABCPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () {
          Navigator.of(context).pop();
          // 触发全局刷新通知
          Provider.of<RefreshNotifier>(context, listen: false).triggerRefresh();
        },
        child: const Text('返回'),
      ),
    );
  }
}

方案对比 #

• 方案一：实现简单，无额外依赖，但页面层级较多时回调传递会显得冗余。
• 方案二：无需传递回调，适合多页面监听场景，但需要管理路由名或GlobalKey。
• 方案三：代码扩展性强，状态管理更清晰，适合中大型项目，避免回调地狱。

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