Flutter：如何在Widget回到路由顶部时触发重新构建？

我有三个Widget A、B、C：从A页面push到B页面时设置了.then回调用于打印调试信息，从B返回A时，.then会触发并打印信息；但从B页面使用push replacement跳转到C页面后再返回A时，.then不会触发。因此需要实现每次用户回到该Widget时都能重新构建它。

业务背景 #

在答题应用中，首页（Widget A）有一个恢复按钮，仅当用户正在进行答题（已开始但未完成，数据保存于本地设备）时才显示，且该按钮需展示答题统计信息（如涉及的科目、题目数量等）。因此需要每次用户回到首页时都重新构建页面，确保按钮状态和统计信息是最新的。

已尝试的无效方案 #

• Riverpod：不倾向使用该方案，因为设置Riverpod状态需要一次性更新整套数据，而我的数据量较大（包含题目列表、当前题目序号、用户已选答案等），且已在逐步保存答题数据（比如用户切换下一题时保存一个整数，选择答案时保存另一个整数）。即便尝试使用Riverpod，回到首页时仍显示过时信息，因为Riverpod仅更新可见Widget。
• NavigatorObserver：尝试使用didPop、didPush观察者方法检查当前路由是否处于顶部，若处于顶部则调用对应函数，但连检查环节都无法通过。

可行解决方案 #

1. 用RouteAware监听路由状态 #

通过RouteAware和RouteObserver监听页面路由变化，当页面重新成为活跃路由时触发刷新，是最适配场景的方案：

首先在全局注册RouteObserver：

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver],
      home: HomePage(),
    );
  }
}

然后在Widget A的State中混入RouteAware并订阅监听：

class _HomePageState extends State<HomePage> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPopNext() {
    // 从其他页面返回当前页面时触发刷新
    _refreshPage();
  }

  void _refreshPage() {
    setState(() {
      // 重新读取本地存储的答题数据，更新页面状态
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面UI构建逻辑
    );
  }
}

didPopNext方法会在当前页面重新回到路由栈顶部时自动触发，完美覆盖从C返回A的场景，无需在其他页面额外处理。

2. 自定义路由传递回调（适合简单路由场景） #

在跳转到B或C页面时，统一传递刷新回调，确保返回时触发：

// 从A跳转到B
Navigator.push(context, MaterialPageRoute(builder: (_) => BPage()))
  .then((_) => _refreshPage());

// 从B跳转到C时，传递回调给C
Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => CPage(onBack: _refreshPage)));

// C页面返回时调用回调
class CPage extends StatelessWidget {
  final VoidCallback onBack;
  const CPage({required this.onBack});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
            onBack.call();
          },
        ),
      ),
    );
  }
}

3. 配合AutomaticKeepAliveClientMixin监听生命周期 #

如果Widget A是StatefulWidget，可混入AutomaticKeepAliveClientMixin，同时监听页面可见状态：

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  void didPopNext() {
    super.didPopNext();
    _refreshPage();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 处理应用从后台回到前台的场景
    if (state == AppLifecycleState.resumed) {
      _refreshPage();
    }
  }

  void _refreshPage() {
    setState(() {
      // 更新页面数据
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用以保证keepAlive生效
    return Scaffold(...);
  }
}

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