InheritedWidget和React中的context功能类似,可以实现跨组件数据的传递。
定义一个共享数据的InheritedWidget,需要继承自InheritedWidget
- 这里定义了一个of方法,该方法通过context开始去查找祖先的HYDataWidget(可以查看源码查找过程)
- updateShouldNotify方法是对比新旧HYDataWidget,是否需要对更新相关依赖的Widget
// 数据共享
class DataWidget extends InheritedWidget {
// 1、共享的数据final int counter;
// 2、定义构造方法const DataWidget({super.key, required this.counter, required Widget child}): super(child: child);
// 3、获取组件最近的当前InheritedWidgetstatic DataWidget? of(BuildContext context) {// 沿着Element树,去找最近的CounterElement,从Element中取出Widget对象return context.dependOnInheritedWidgetOfExactType();}// 4、 决定要不要回调State中的didChangeDependencies 方法 bool updateShouldNotify(covariant DataWidget oldWidget) {// 如果返回true:执行依赖当前的InheritedWidget的state中的 didChangeDependenciesreturn counter != oldWidget.counter;}
}
使用定义的 DataWidget 共享数据
class _MyHomePageState extends State<MyHomePage> {HomeRequest homeRequest = HomeRequest();int data = 100; // 定义一个共享数据变量void initState() {super.initState();Logs("_MyHomePageState", StackTrace.current);homeRequest.getMovieTopList(0, 20).then((value) {});}Widget build(BuildContext context) {return Scaffold(// 脚手架appBar: AppBar(title: Text(widget.title),),body: DataWidget( // 需要在共享数据组件的父类上继承DataWidgetcounter: data, // 将数据传递给共享数据 counterchild: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [HYShowData01(),HYShowData02(),],),)),// 定义一个 按钮点击自动增加数据floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: () {setState(() {data++;});},),);}
}class HYShowData01 extends StatelessWidget {Widget build(BuildContext context) {int? _counter = DataWidget.of(context)?.counter; // 使用共享数据return Container(color: Colors.red,child: Text("共享状态:${_counter}"),);}
}class HYShowData02 extends StatefulWidget {State<HYShowData02> createState() => _HYShowData02State();
}class _HYShowData02State extends State<HYShowData02> {void didChangeDependencies() {// TODO: implement didChangeDependenciessuper.didChangeDependencies();}Widget build(BuildContext context) {int? _counter = DataWidget.of(context)?.counter;return Container(color: Colors.blue,child: Text("共享状态:${_counter}"),);}
}