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 createState() => HomePageState();
}

class HomePageState extends State {
  // 在父组件中创建 GlobalKey
  GlobalKey sonWidgetState = GlobalKey();

  @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 createState() => SonWidgetState();
}

class SonWidgetState extends State {
  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 createState() => HomePageState();
}

class HomePageState extends State {

  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 createState() => SonWidgetState();
}

class SonWidgetState extends State {

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => {
          // 调用父组件方法
          widget.changeName("訾博${DateTime.now().microsecondsSinceEpoch}"),
        },
        child: const Text("change name"),
      ),
    );
  }
}