如何跨Stateful页面获取实时变量值？页面间状态同步问题

现有代码：

stateful page1 {
 bool myBool = false ;
}


stateful page2 {
 print(page1().myBool ) // 能打印值但无法获取更新后的值
}

当page1中的myBool改为true后，page2始终打印false。说明：page2是位于page1上方的栈页面，page1仍处于挂载状态，希望page2能像在page1内部一样获取myBool的实时值。

解决方案 #

你当前的问题在于每次调用page1()都会生成一个全新的Page1实例，自然拿不到原有挂载页面的状态值。要实现跨页面共享实时状态，可采用以下几种可行方案：

• 使用状态管理工具：比如Provider、Riverpod、Bloc这类框架，将myBool存入全局或跨页面的状态容器中，page1负责更新状态，page2监听状态变化，就能实时获取最新值。
  举个Provider的简单示例：

  // 定义全局状态
  final myBoolProvider = StateProvider<bool>((ref) => false);
  
  // Page1中更新状态
  ref.read(myBoolProvider.notifier).state = true;
  
  // Page2中监听并获取实时值
  bool currentBool = ref.watch(myBoolProvider);
  print(currentBool);
  

• 通过路由传参传递状态引用：使用Navigator跳转时，把page1的状态对象或监听回调传递给page2。比如：

  // Page1中跳转到Page2
  Navigator.push(context, MaterialPageRoute(
    builder: (context) => Page2(myBoolNotifier: myBoolNotifier),
  ));
  
  // Page2中接收并监听状态
  class Page2 extends StatefulWidget {
    final ValueNotifier<bool> myBoolNotifier;
    const Page2({required this.myBoolNotifier, super.key});
  
    @override
    State<Page2> createState() => _Page2State();
  }
  
  class _Page2State extends State<Page2> {
    @override
    Widget build(BuildContext context) {
      return ValueListenableBuilder<bool>(
        valueListenable: widget.myBoolNotifier,
        builder: (context, value, child) {
          print(value);
          return // 页面布局内容;
        },
      );
    }
  }
  
  // Page1中用ValueNotifier管理状态
  final myBoolNotifier = ValueNotifier<bool>(false);
  // 更新状态时调用
  myBoolNotifier.value = true;
  

• 全局变量（不推荐）：直接将myBool定义为全局变量，page1更新它，page2直接读取。但这种方式不利于状态维护，页面复杂后容易引发问题，仅适合极简场景。

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