Метод интермодуляции родительско-дочерних компонентов Flutter

Метод интермодуляции родительско-дочерних компонентов Flutter

1. Родительский компонент вызывает метод дочернего компонента.

1 Обзор

Используйте 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. Эффект