Flutter 父子组件互调方法

你的名字 2023-10-13 11:26 29阅读 0赞

# 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、效果 ##

![screenshots][]

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

## 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、效果 ##

![screenshots2][]

[screenshots]: https://img-blog.csdnimg.cn/img_convert/a3dad5751975dc723109bd3423e7835f.gif
[screenshots2]: https://img-blog.csdnimg.cn/img_convert/4f8e25ae609869020ae728c9d22a5a9a.gif