Flutter 父子组件互调方法
一、父组件调用子组件方法
1、概述
使用 GlobalKey:可以为子组件创建一个 GlobalKey 对象,通过该 GlobalKey 可以获取到子组件的状态,并调用其方法。
2、代码实现
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
// 在父组件中创建 GlobalKey
GlobalKey<SonWidgetState> sonWidgetState = GlobalKey<SonWidgetState>();
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 在子组件中使用 GlobalKey
SonWidget(key: sonWidgetState),
const SizedBox(height: 10),
ElevatedButton(
onPressed: () => {
// 调用子组件方法
sonWidgetState.currentState?.changeName("訾博${DateTime.now().microsecondsSinceEpoch}"),
},
child: const Text("change name"),
)
],
),
);
}
}
/// 子组件
class SonWidget extends StatefulWidget {
const SonWidget({super.key});
State<StatefulWidget> createState() => SonWidgetState();
}
class SonWidgetState extends State<SonWidget> {
late String name = "zibo";
/// 父组件调用此方法实现修改 name
/// @param newName 新的名字
void changeName(String newName) {
setState(() {
name = newName;
});
}
Widget build(BuildContext context) {
return Center(
child: Text(name, style: const TextStyle(fontSize: 40)),
);
}
}
3、效果
二、子组件调用父组件方法
1、概述
在 Flutter 中,子组件可以通过回调函数的方式来调用父组件的方法。文章来源:https://www.toymoban.com/news/detail-670440.html
2、代码实现
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
late String name = "zibo";
/// 子组件调用此方法实现修改 name
/// @param newName 新的名字
void changeName(String newName) {
setState(() {
name = newName;
});
}
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(name, style: const TextStyle(fontSize: 40)),
const SizedBox(height: 10),
SonWidget(changeName: changeName),
],
),
);
}
}
/// 子组件
class SonWidget extends StatefulWidget {
const SonWidget({super.key, required this.changeName});
final Function(String name) changeName;
State<StatefulWidget> createState() => SonWidgetState();
}
class SonWidgetState extends State<SonWidget> {
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () => {
// 调用父组件方法
widget.changeName("訾博${DateTime.now().microsecondsSinceEpoch}"),
},
child: const Text("change name"),
),
);
}
}
3、效果
文章来源地址https://www.toymoban.com/news/detail-670440.html
到了这里,关于Flutter 父子组件互调方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!