Flutter 父子组件互调方法

Flutter 父子组件互调方法

文章目录

• Flutter 父子组件互调方法
• 一、父组件调用子组件方法
• • 1、概述
  • 2、代码实现
  • 3、效果
• 二、子组件调用父组件方法
• • 1、概述
  • 2、代码实现
  • 3、效果

一、父组件调用子组件方法

1、概述

使用 GlobalKey：可以为子组件创建一个 GlobalKey 对象，通过该 GlobalKey 可以获取到子组件的状态，并调用其方法。

2、代码实现

import 'package:flutter/material.dart';class HomePage extends StatefulWidget {  const HomePage({super.key});  @override  State<HomePage> createState() => HomePageState();}class HomePageState extends State<HomePage> {  // 在父组件中创建 GlobalKey  GlobalKey<SonWidgetState> sonWidgetState = GlobalKey<SonWidgetState>();  @override  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});  @override  State<StatefulWidget> createState() => SonWidgetState();}class SonWidgetState extends State<SonWidget> {  late String name = "zibo";  /// 父组件调用此方法实现修改 name  /// @param newName 新的名字  void changeName(String newName) {    setState(() {      name = newName;    });  }  @override  Widget build(BuildContext context) {    return Center(      child: Text(name, style: const TextStyle(fontSize: 40)),    );  }}

3、效果

二、子组件调用父组件方法

1、概述

在 Flutter 中，子组件可以通过回调函数的方式来调用父组件的方法。

2、代码实现

import 'package:flutter/material.dart';class HomePage extends StatefulWidget {  const HomePage({super.key});  @override  State<HomePage> createState() => HomePageState();}class HomePageState extends State<HomePage> {  late String name = "zibo";  /// 子组件调用此方法实现修改 name  /// @param newName 新的名字  void changeName(String newName) {    setState(() {      name = newName;    });  }  @override  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;  @override  State<StatefulWidget> createState() => SonWidgetState();}class SonWidgetState extends State<SonWidget> {  @override  Widget build(BuildContext context) {    return Center(      child: ElevatedButton(        onPressed: () => {          // 调用父组件方法          widget.changeName("訾博${DateTime.now().microsecondsSinceEpoch}"),        },        child: const Text("change name"),      ),    );  }}

3、效果

来源地址：https://blog.csdn.net/qq_29689343/article/details/131541951