flutter開發(fā)實(shí)戰(zhàn)-父子Widget組件調(diào)用方法
在最近開發(fā)中遇到了需要父組件調(diào)用子組件方法，子組件調(diào)用父組件的方法。這里記錄一下方案。
一、使用GlobalKey
父組件使用globalKey.currentState調(diào)用子組件具體方法，子組件通過方法回調(diào)callback方法調(diào)用父組件的方法。
例如示例中的
例如父組件
父組件使用globalKey.currentState調(diào)用子組件方法
globalKey.currentState?.subFunction(arg);
class FatherOutContainer extends StatefulWidget {
const FatherOutContainer({super.key});
@override
State<FatherOutContainer> createState() => _FatherOutContainerState();
}
class _FatherOutContainerState extends State<FatherOutContainer> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
// 這里是父組件方法
void fatherFunction(String param) {
print("這里是父組件方法 params:${param}");
}
@override
Widget 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("點(diǎn)擊調(diào)用子組件方法"),
onPressed: () {
String arg = "來自父組件的參數(shù)";
globalKey.currentState?.subFunction(arg);
},
),
Expanded(child: Container()),
],
),
);
}
}
子組件代碼
子組件通過方法回調(diào)onPressedCallback方法調(diào)用父組件的方法。
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;
@override
State<SubChild> createState() => _SubChildState();
}
class _SubChildState extends State<SubChild> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
// 這里是子組件方法
void subFunction(String arg) {
print("這里是子組件方法 arg:${arg}");
}
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
color: Colors.greenAccent,
child: Container(
width: 200,
height: 50,
child: TextButton(
child: Text("點(diǎn)擊調(diào)用父組件方法", style: TextStyle(
color: Colors.brown
),),
onPressed: () {
onSubBtnPressed();
},
),
)
);
}
// 點(diǎn)擊調(diào)用父組件方法
void onSubBtnPressed() {
print("點(diǎn)擊調(diào)用父組件方法");
String param = "來自子組件的參數(shù)";
widget.onPressedCallback(param);
}
}
二、使用Controller，中間控制器
2.1、定義Controller，這里定義中間的方法調(diào)用的類
// 使用Controller類來調(diào)用方法
class MethodController {
// 用此方法調(diào)用子組件方法
Function(String arg)? dealSubFunction;
// 用此方法調(diào)用父組件方法
Function(String arg)? dealFatherFunction;
}
2.2、父組件代碼
父組件通過定義methodController.dealFatherFunction，子組件可以調(diào)用該方法進(jìn)行調(diào)用父組件的方法
// 定義
methodController.dealFatherFunction = (String arg) {
// 調(diào)用父組件方法
fatherFunction(arg);
};
父組件完整代碼
class FatherOutContainer extends StatefulWidget {
const FatherOutContainer({super.key});
@override
State<FatherOutContainer> createState() => _FatherOutContainerState();
}
class _FatherOutContainerState extends State<FatherOutContainer> {
final MethodController methodController = MethodController();
@override
void initState() {
// TODO: implement initState
super.initState();
methodController.dealFatherFunction = (String arg) {
// 調(diào)用父組件方法
fatherFunction(arg);
};
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
// 這里是父組件方法
void fatherFunction(String param) {
print("這里是父組件方法 params:${param}");
}
@override
Widget 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("點(diǎn)擊調(diào)用子組件方法"),
onPressed: () {
String arg = "來自父組件的參數(shù)";
if (methodController.dealSubFunction != null) {
methodController.dealSubFunction!(arg);
}
},
),
Expanded(child: Container()),
],
),
);
}
}
2.3、子組件
子組件通過定義methodController.dealSubFunction，父組件可以調(diào)用該方法進(jìn)行調(diào)用子組件的方法
// 定義
widget.methodController.dealSubFunction = (String arg) {
// 調(diào)用子方法
subFunction(arg);
};
子組件完整代碼
// 子組件Widget
class SubChild extends StatefulWidget {
const SubChild({
super.key,
required this.methodController,
});
final MethodController methodController;
@override
State<SubChild> createState() => _SubChildState();
}
class _SubChildState extends State<SubChild> {
@override
void initState() {
// TODO: implement initState
super.initState();
widget.methodController.dealSubFunction = (String arg) {
// 調(diào)用子方法
subFunction(arg);
};
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
// 這里是子組件方法
void subFunction(String arg) {
print("這里是子組件方法 arg:${arg}");
}
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
color: Colors.greenAccent,
child: Container(
width: 200,
height: 50,
child: TextButton(
child: Text(
"點(diǎn)擊調(diào)用父組件方法",
style: TextStyle(color: Colors.brown),
),
onPressed: () {
onSubBtnPressed();
},
),
));
}
// 點(diǎn)擊調(diào)用父組件方法
void onSubBtnPressed() {
print("點(diǎn)擊調(diào)用父組件方法");
String param = "來自子組件的參數(shù)";
if (widget.methodController.dealFatherFunction != null) {
widget.methodController.dealFatherFunction!(param);
}
}
}
三、小結(jié)
flutter開發(fā)實(shí)戰(zhàn)-父子Widget組件調(diào)用方法。這里使用的Globalkey調(diào)用子組件方法，通過子組件的方法回調(diào)調(diào)用父組件的方法。還可以通過Controller類來控制方法調(diào)用父子組件對(duì)應(yīng)方法。父子組件方法調(diào)用的方式還可以通過事件通知等方法實(shí)現(xiàn)調(diào)用。文章來源：http://www.zghlxwxcb.cn/news/detail-611007.html
學(xué)習(xí)記錄，每天不停進(jìn)步。文章來源地址http://www.zghlxwxcb.cn/news/detail-611007.html
到了這里，關(guān)于flutter開發(fā)實(shí)戰(zhàn)-父子Widget組件調(diào)用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
