Flutter 父子组件互调方法

Flutter 父子组件互调方法

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

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