flutter开发实战-父子Widget组件调用方法

flutter开发实战-父子Widget组件调用方法

在最近开发中遇到了需要父组件调用子组件方法，子组件调用父组件的方法。这里记录一下方案。

一、使用GlobalKey

父组件使用globalKey.currentState调用子组件具体方法，子组件通过方法回调callback方法调用父组件的方法。
例如示例中的

例如父组件

父组件使用globalKey.currentState调用子组件方法
globalKey.currentState?.subFunction(arg);

class FatherOutContainer extends StatefulWidget {const FatherOutContainer({super.key});@overrideState<FatherOutContainer> createState() => _FatherOutContainerState();
}class _FatherOutContainerState extends State<FatherOutContainer> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}// 这里是父组件方法void fatherFunction(String param) {print("这里是父组件方法 params:${param}");}@overrideWidget build(BuildContext context) {return Container(width: 375,height: 600,color: Colors.amber,child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [SizedBox(width: 20,height: 100,),SubChild(key: globalKey,onPressedCallback: (param) {fatherFunction(param);},),SizedBox(width: 20,height: 40,),TextButton(child: Text("点击调用子组件方法"),onPressed: () {String arg = "来自父组件的参数";globalKey.currentState?.subFunction(arg);},),Expanded(child: Container()),],),);}
}

子组件代码

子组件通过方法回调onPressedCallback方法调用父组件的方法。
onPressedCallback: (param) {
fatherFunction(param);
},

GlobalKey<_SubChildState> globalKey = GlobalKey();// 子组件Widget
class SubChild extends StatefulWidget {const SubChild({super.key,required this.onPressedCallback,});final Function(String param) onPressedCallback;@overrideState<SubChild> createState() => _SubChildState();
}class _SubChildState extends State<SubChild> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}// 这里是子组件方法void subFunction(String arg) {print("这里是子组件方法 arg:${arg}");}@overrideWidget build(BuildContext context) {return Container(width: 300,height: 300,color: Colors.greenAccent,child: Container(width: 200,height: 50,child: TextButton(child: Text("点击调用父组件方法", style: TextStyle(color: Colors.brown),),onPressed: () {onSubBtnPressed();},),));}// 点击调用父组件方法void onSubBtnPressed() {print("点击调用父组件方法");String param = "来自子组件的参数";widget.onPressedCallback(param);}
}

二、使用Controller，中间控制器

2.1、定义Controller，这里定义中间的方法调用的类

// 使用Controller类来调用方法
class MethodController {// 用此方法调用子组件方法Function(String arg)? dealSubFunction;// 用此方法调用父组件方法Function(String arg)? dealFatherFunction;
}

2.2、父组件代码

父组件通过定义methodController.dealFatherFunction，子组件可以调用该方法进行调用父组件的方法

// 定义
methodController.dealFatherFunction = (String arg) {// 调用父组件方法fatherFunction(arg);};

父组件完整代码

class FatherOutContainer extends StatefulWidget {const FatherOutContainer({super.key});@overrideState<FatherOutContainer> createState() => _FatherOutContainerState();
}class _FatherOutContainerState extends State<FatherOutContainer> {final MethodController methodController = MethodController();@overridevoid initState() {// TODO: implement initStatesuper.initState();methodController.dealFatherFunction = (String arg) {// 调用父组件方法fatherFunction(arg);};}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}// 这里是父组件方法void fatherFunction(String param) {print("这里是父组件方法 params:${param}");}@overrideWidget build(BuildContext context) {return Container(width: 375,height: 600,color: Colors.amber,child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [SizedBox(width: 20,height: 100,),SubChild(methodController: methodController,),SizedBox(width: 20,height: 40,),TextButton(child: Text("点击调用子组件方法"),onPressed: () {String arg = "来自父组件的参数";if (methodController.dealSubFunction != null) {methodController.dealSubFunction!(arg);}},),Expanded(child: Container()),],),);}
}

2.3、子组件

子组件通过定义methodController.dealSubFunction，父组件可以调用该方法进行调用子组件的方法

// 定义
widget.methodController.dealSubFunction = (String arg) {// 调用子方法subFunction(arg);};

子组件完整代码

// 子组件Widget
class SubChild extends StatefulWidget {const SubChild({super.key,required this.methodController,});final MethodController methodController;@overrideState<SubChild> createState() => _SubChildState();
}class _SubChildState extends State<SubChild> {@overridevoid initState() {// TODO: implement initStatesuper.initState();widget.methodController.dealSubFunction = (String arg) {// 调用子方法subFunction(arg);};}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}// 这里是子组件方法void subFunction(String arg) {print("这里是子组件方法 arg:${arg}");}@overrideWidget build(BuildContext context) {return Container(width: 300,height: 300,color: Colors.greenAccent,child: Container(width: 200,height: 50,child: TextButton(child: Text("点击调用父组件方法",style: TextStyle(color: Colors.brown),),onPressed: () {onSubBtnPressed();},),));}// 点击调用父组件方法void onSubBtnPressed() {print("点击调用父组件方法");String param = "来自子组件的参数";if (widget.methodController.dealFatherFunction != null) {widget.methodController.dealFatherFunction!(param);}}
}

三、小结

flutter开发实战-父子Widget组件调用方法。这里使用的Globalkey调用子组件方法，通过子组件的方法回调调用父组件的方法。还可以通过Controller类来控制方法调用父子组件对应方法。父子组件方法调用的方式还可以通过事件通知等方法实现调用。

学习记录，每天不停进步。