网站建设推广销售人员,wordpress播放器修改,农资网站建设,WordPress要学多久flutter开发实战-父子Widget组件调用方法
在最近开发中遇到了需要父组件调用子组件方法#xff0c;子组件调用父组件的方法。这里记录一下方案。 一、使用GlobalKey
父组件使用globalKey.currentState调用子组件具体方法#xff0c;子组件通过方法回调callback方法调用父组…flutter开发实战-父子Widget组件调用方法
在最近开发中遇到了需要父组件调用子组件方法子组件调用父组件的方法。这里记录一下方案。 一、使用GlobalKey
父组件使用globalKey.currentState调用子组件具体方法子组件通过方法回调callback方法调用父组件的方法。 例如示例中的
例如父组件
父组件使用globalKey.currentState调用子组件方法 globalKey.currentState?.subFunction(arg); class FatherOutContainer extends StatefulWidget {const FatherOutContainer({super.key});overrideStateFatherOutContainer createState() _FatherOutContainerState();
}class _FatherOutContainerState extends StateFatherOutContainer {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;overrideStateSubChild createState() _SubChildState();
}class _SubChildState extends StateSubChild {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});overrideStateFatherOutContainer createState() _FatherOutContainerState();
}class _FatherOutContainerState extends StateFatherOutContainer {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;overrideStateSubChild createState() _SubChildState();
}class _SubChildState extends StateSubChild {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类来控制方法调用父子组件对应方法。父子组件方法调用的方式还可以通过事件通知等方法实现调用。
学习记录每天不停进步。
