如何在Flutter组件树中向上传递FooPageState至Widget1？

我的代码结构如下：

class SomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Widget1(), // 如何将`FooPageState`传递给这个组件？
        Widget2(), 
      ],
    );
  }
}


class Widget2 extends StatefulWidget {
  @override
  State<Widget2> createState() => _Widget2State();
}

class _Widget2State extends State<Widget2> {
  final GlobalKey<FooPageState> _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        InnerWidget1(),
        FooPage(
          key: _globalKey,
        ),
        InnerWidget2(
          pageState: _globalKey.currentState, // 传递`FooPageState`
        ),
      ],
    );
  }
}

我需要将FooPageState传递给Widget1，FooPage是常规的StatefulWidget，其状态为FooPageState，该如何实现？

可行方案： #

1. 在SomePage中声明全局Key，同步传递给Widget1和Widget2

   • 调整后代码示例：

     class SomePage extends StatelessWidget {
       final GlobalKey<FooPageState> _fooPageKey = GlobalKey();
     
       @override
       Widget build(BuildContext context) {
         return Column(
           children: [
             Widget1(pageState: _fooPageKey.currentState),
             Widget2(fooPageKey: _fooPageKey), 
           ],
         );
       }
     }
     
     class Widget2 extends StatefulWidget {
       final GlobalKey<FooPageState> fooPageKey;
     
       const Widget2({required this.fooPageKey, super.key});
     
       @override
       State<Widget2> createState() => _Widget2State();
     }
     
     class _Widget2State extends State<Widget2> {
       @override
       Widget build(BuildContext context) {
         return Column(
           children: [
             InnerWidget1(),
             FooPage(
               key: widget.fooPageKey,
             ),
             InnerWidget2(
               pageState: widget.fooPageKey.currentState,
             ),
           ],
         );
       }
     }
     

   • 注意：首次构建时_fooPageKey.currentState可能为null，需要在Widget1中处理空值逻辑，或等待FooPage初始化完成后再使用状态。

2. 将SomePage转为StatefulWidget，通过回调传递状态

   • 实现步骤：
     • 把SomePage改为StatefulWidget，在状态类中定义变量存储FooPageState，并提供回调函数。
     • 将回调传递给Widget2，在Widget2的状态类中，利用SchedulerBinding.instance.addPostFrameCallback在FooPage渲染完成后调用回调，把状态传递给SomePage。
     • SomePage触发setState更新状态，再传递给Widget1。
   • 代码示例：

     class SomePage extends StatefulWidget {
       @override
       State<SomePage> createState() => _SomePageState();
     }
     
     class _SomePageState extends State<SomePage> {
       FooPageState? _fooPageState;
     
       void _updateFooPageState(FooPageState? state) {
         setState(() {
           _fooPageState = state;
         });
       }
     
       @override
       Widget build(BuildContext context) {
         return Column(
           children: [
             Widget1(pageState: _fooPageState),
             Widget2(onFooPageStateReady: _updateFooPageState), 
           ],
         );
       }
     }
     
     class Widget2 extends StatefulWidget {
       final Function(FooPageState?) onFooPageStateReady;
     
       const Widget2({required this.onFooPageStateReady, super.key});
     
       @override
       State<Widget2> createState() => _Widget2State();
     }
     
     class _Widget2State extends State<Widget2> {
       final GlobalKey<FooPageState> _globalKey = GlobalKey();
     
       @override
       void initState() {
         super.initState();
         // 等待帧渲染完成后获取状态
         SchedulerBinding.instance.addPostFrameCallback((_) {
           widget.onFooPageStateReady(_globalKey.currentState);
         });
       }
     
       @override
       Widget build(BuildContext context) {
         return Column(
           children: [
             InnerWidget1(),
             FooPage(
               key: _globalKey,
             ),
             InnerWidget2(
               pageState: _globalKey.currentState,
             ),
           ],
         );
       }
     }
     

   • 替代实现：也可以用Notification和NotificationListener传递状态——定义自定义通知类，在FooPageState初始化完成后发送通知，SomePage通过监听通知更新状态并传递给Widget1。

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