Flutter如何在父Widget调用子Widget方法及用setState触发音频播放

实现方案总览 #

你可以根据项目复杂度选择以下两种实现方式：

方案1：通过GlobalKey直接调用子组件方法（适合小型简单场景） #

这种方式实现最直接，核心是通过全局key获取子组件的状态实例，直接调用内部方法：

1. 首先将子组件的State类改为公开（去掉前缀下划线，否则父组件无法访问）
2. 父组件创建对应类型的GlobalKey绑定到子组件
3. 父按钮点击时通过key获取子组件状态调用playAudio

修改后的子组件代码：

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

class ChildWidget extends StatefulWidget {
  const ChildWidget({super.key});

  // 去掉State类的下划线，改为公开
  @override
  ChildWidgetState createState() => ChildWidgetState();
}

// 公开State类
class ChildWidgetState extends State<ChildWidget> {
  final audioPlayer = AudioCache(fixedPlayer: AudioPlayer());

  // 方法也保持公开即可，不用下划线
  void playAudio() {
    String audioFile = "audio/words/alive_0.mp3";
    audioPlayer.play(audioFile);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300.0,
      height: 100.0,
      color: Colors.amber,
      child: TextButton(
        child: const Text("Child Play Button"),
        onPressed: playAudio,
      ),
    );
  }
}

修改后的父组件代码：

import 'package:flutter/material.dart';
import 'package:phonica/audio_test/child.dart';

class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  // 定义对应子State类型的GlobalKey
  final GlobalKey<ChildWidgetState> _childKey = GlobalKey<ChildWidgetState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Container(
              width: 300.0,
              height: 100.0,
              color: Colors.green,
              alignment: Alignment.center,
              child: TextButton(
                child: const Text("Parent Play Button"),
                // 通过key调用子组件方法
                onPressed: () => _childKey.currentState?.playAudio(),
              ),
            ),
          ),
          // 绑定key到子组件
          ChildWidget(key: _childKey),
        ],
      ),
    );
  }
}

方案2：状态提升（Flutter官方推荐，通过setState触发） #

这种方式符合Flutter「状态向下传递、事件向上传递」的设计原则，适合需要复杂状态联动的项目，核心逻辑是将播放触发状态放到父层管理，通过setState更新后通知子组件执行播放：

1. 父组件定义播放触发状态变量，点击按钮时调用setState更新状态
2. 子组件接收父层传递的触发状态，在生命周期中监听状态变化，触发播放后通知父层重置状态

修改后的父组件代码：

import 'package:flutter/material.dart';
import 'package:phonica/audio_test/child.dart';

class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  // 定义播放触发状态
  bool _shouldPlayAudio = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Container(
              width: 300.0,
              height: 100.0,
              color: Colors.green,
              alignment: Alignment.center,
              child: TextButton(
                child: const Text("Parent Play Button"),
                // 点击时调用setState更新状态触发播放
                onPressed: () => setState(() => _shouldPlayAudio = true),
              ),
            ),
          ),
          // 向子组件传递触发状态和完成回调
          ChildWidget(
            shouldPlay: _shouldPlayAudio,
            onPlayCompleted: () => setState(() => _shouldPlayAudio = false),
          ),
        ],
      ),
    );
  }
}

修改后的子组件代码：

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

class ChildWidget extends StatefulWidget {
  final bool shouldPlay;
  final VoidCallback onPlayCompleted;

  const ChildWidget({
    super.key,
    required this.shouldPlay,
    required this.onPlayCompleted,
  });

  @override
  _ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  final audioPlayer = AudioCache(fixedPlayer: AudioPlayer());

  void playAudio() {
    String audioFile = "audio/words/alive_0.mp3";
    audioPlayer.play(audioFile);
  }

  // 监听父组件传递的参数变化
  @override
  void didUpdateWidget(covariant ChildWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 当触发状态从false变为true时执行播放
    if (widget.shouldPlay && !oldWidget.shouldPlay) {
      playAudio();
      // 播放完成后通知父组件重置状态，方便下次触发
      widget.onPlayCompleted();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300.0,
      height: 100.0,
      color: Colors.amber,
      child: TextButton(
        child: const Text("Child Play Button"),
        onPressed: playAudio,
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Ian Rajkumar