Flutter GoRouter：从Page4跳转至Page2时强制重建Widget的方法

场景说明 #

当前页面栈为 Page1→Page2→Page3→Page4，在Page4中通过context.goNamed('page2')导航回Page2时，Page2的表单状态会被保留，不会触发initState等组件生命周期方法，需要实现强制重建。

解决方法 #

方法1：添加唯一路由参数触发重建

通过给Page2的路由添加一个每次跳转都不同的参数（如时间戳），让GoRouter认为是新的路由实例，从而创建新的Page2组件：

// Page4中跳转的代码
context.goNamed(
  'page2',
  queryParams: {'refresh': DateTime.now().millisecondsSinceEpoch.toString()},
);

路由定义中无需额外处理该参数（只要路由允许接收queryParams即可），GoRouter会因为参数变化生成新的页面实例，触发initState及表单重置。

方法2：给Page2设置唯一Key强制新建实例

在GoRouter的路由配置中，给Page2指定UniqueKey()，确保每次进入Page2都会创建新的组件实例：

GoRoute(
  name: 'page2',
  path: '/page2',
  builder: (context, state) => Page2(key: UniqueKey()),
)

这种方式会让所有进入Page2的场景都触发重建，适合需要每次进入都初始化的场景。

方法3：手动监听路由变化重置状态（无需重建组件）

如果不需要完全重建组件，仅需重置表单状态，可以在Page2的State类中通过didUpdateWidget手动重置：

class _Page2State extends State<Page2> {
  final _formKey = GlobalKey<FormState>();
  final _textController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _initFormData();
  }

  void _initFormData() {
    // 初始化表单数据的逻辑
    _textController.clear();
  }

  @override
  void didUpdateWidget(covariant Page2 oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 当路由实例变化时重置表单
    final currentRoute = ModalRoute.of(context)?.settings;
    if (currentRoute?.name == 'page2' && currentRoute?.arguments != oldWidget.arguments) {
      _initFormData();
      _formKey.currentState?.reset();
    }
  }
}

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