当前位置：首页 > news >正文

第一百零一回如何在组件树之间共享数据

news 2025/7/7 16:47:07

文章目录

概念介绍
使用方法
示例代码

我们在上一章回中介绍了"如何实现文件存储"相关的内容，本章回中将介绍 如何实现组件之间共享数据。闲话休提，让我们一起Talk Flutter吧。

概念介绍

数据共享是程序中常用的功能，本章回介绍如何在组件之间共享数据，不过这里提到的组件不是任意组件，主要指父组件与子组件，Flutter提供了InheritedWidget组件来实现共享数据的功能，本章回中将详细介绍如何使用该组件实现共享数据的功能。

使用方法

创建一个父类，类中至少包含两个属性：共享数据和子组件(child)；
父类继承自InheritedWidget类，实现父类的中方法；
创建一个子类，子类中使用父类中共享的数据;
创建子类对象并且将它赋值给父类对象的子组件属性(childe)；
更新父类中的共享数据，子组件中的共享数据会自动更新；

示例代码

///定义父组件，父组件包含一个共享数据data
class FatherWidget extends InheritedWidget {String data;FatherWidget({Key? key, this.data = "default data of Father", required Widget child}): super(key: key, child: child);///定义获取父组件的方法，方便子组件获取父组件中的数据static FatherWidget? of(BuildContext context) {///下面的方式可以通知子组件更新// return context.dependOnInheritedWidgetOfExactType<FatherWidget>();///下面的方式无法通知子组件更新return context.getElementForInheritedWidgetOfExactType<FatherWidget>()?.widget as FatherWidget;}///返回true时通知更新子组件中的data，也就是调用子组件的didChangeDependencies()方法@overridebool updateShouldNotify(FatherWidget oldWidget) {return oldWidget.data != data;}
}///在子组件中使用父组件中的共享数据
class SonWidget extends StatefulWidget {const SonWidget({Key? key}) : super(key: key);@overrideState<SonWidget> createState() => _SonWidgetState();
}class _SonWidgetState extends State<SonWidget> {@overrideWidget build(BuildContext context) {String? data = FatherWidget.of(context)?.data;return Text("son data: $data",style: const TextStyle(color: Colors.white, fontSize: 24),);}@overridevoid initState() {debugPrint("SonWidget: initState");}///父组件中的数据更新时会回调此方法@overridevoid didChangeDependencies() {debugPrint("SonWidget: didChangeDependencies");}@overridevoid dispose() {debugPrint("SonWidget: dispose");}@overridevoid activate() {debugPrint("SonWidget: activate");}@overridevoid deactivate() {debugPrint("SonWidget: deactivate");}@overridevoid didUpdateWidget(SonWidget oldWidget) {debugPrint("SonWidget: didUpdateWidget");}
}children: [Container(width: 300,height: 100,alignment: Alignment.center,color: Colors.blue,child: FatherWidget(///父组件和子组件形成组件树data: _tempData,child: const SonWidget(),),),SizedBox(width: 200,height: 100,child: ElevatedButton(onPressed: () {setState(() {///更新父组件中的数据，子组件中数据会自动更新_tempData = "new data";});},child: const Text('Change data'),),),
],