如何在子小部件中调用函数？

Question

我有一个具有音频播放器和按钮的子小部件，当我按下该按钮时，它会调用playAudio() 方法，该方法会按预期播放音频，因为所有内容都包含在一个文件中。

但是，子小部件嵌套在父小部件中，我不知道如何从父小部件调用相同的 playAudio() 方法。

如何让父窗口小部件中的Parent Play Button 调用子窗口小部件中的方法？

另外：我读到 Flutter 鼓励setState，在这种情况下，如何使用setState 来触发音频？

家长小部件

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

class ParentWidget extends StatefulWidget {
  ParentWidget();

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

class _ParentWidgetState extends State<ParentWidget> {
  @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: Text("Parent Play Button"),
                onPressed: () => {}, // <-- Call child widget's playAudio()
              ),
            ),
          ),
          ChildWidget(),
        ],
      ),
    );
  }
}

儿童小部件

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

class ChildWidget extends StatefulWidget {
ChildWidget();

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

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

  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: Text("Child Play Button"),
        onPressed: () => {playAudio()},
      ),
    );
  }
}

Answer 1

您必须通过 GestureDetector() 包装您的父窗口小部件，然后使用 onTap 调用该函数。见下文

GestureDetector(
          onTap: () {
            setState(() {
              // Toggle light when tapped.
              _lightIsOn = !_lightIsOn;
            });
          },
          child: Container(
            color: Colors.yellow.shade600,
            padding: const EdgeInsets.all(8),
            // Change button text when light changes state.
            child: Text(_lightIsOn ? 'TURN LIGHT OFF' : 'TURN LIGHT ON'),
          ),
        ),