Flutter InheritedWidget 状态共享

Flutter InheritedWidget 状态共享

首先自定义一个InheritedWidget的数据Widget

class CounterWidget extends InheritedWidget{
  //1.共享数据
  final int counter;

  //2.定义构造方法
  CounterWidget({this.counter, Widget child}):super(child: child);

  //获取最近的InheritedWidget
  static CounterWidget of(BuildContext context) {
    //沿着element的树去找到最近的CounterElement,从element中取出widget对象
    return context.dependOnInheritedWidgetOfExactType();
  }

  //如果返回true:执行依赖当前的InheritedWidget 的state的didChangeDependencies
  @override
  bool updateShouldNotify(CounterWidget oldWidget) {
   return oldWidget.counter != counter;
  }
}

使用自定义InheritedWidget包裹需要共享state的子组件

class Demo extends StatefulWidget {
  const Demo({
    Key key,
  }) : super(key: key);

  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  int _counter = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          CounterWidget(
            counter: _counter,
            child: Column(
              children: <Widget>[
                CounterDemo1(),
                CounterDemo2(),
              ],
            ),
          ),
         IconButton(
           icon: Icon(Icons.add),
           onPressed: () {
             setState(() {
               _counter++;
             });
           },
         )
        ],
      ),
    );
  }
}

在子组件获取共享的state

在Stateful中也是相同代码获取

class CounterDemo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int count = CounterWidget.of(context).counter;
    return Container(
      child: Text('$count'),
    );
  }
}