异步/等待未按预期工作.如何在 Flutter 中开始播放声音后正好 4 秒启动计时器

Question

当我的应用出现游戏屏幕时，开始播放一个音频文件，上面写着"准备好了吗？3...2...1...GO"，然后播放音乐。

我希望游戏计时器在显示"GO"的同时启动，这正好是音频的 4 秒。

通过在 initState(( 中启动音频文件，然后使用"Future.delayed(const Duration(seconds： 4(， (( => startTimer(((;"，我非常接近，但问题是用户第一次播放时，加载音频需要一点时间，所以计时器在音频说"GO"之前启动。

我试图通过制作一个使用 async 和 await 的 startGameSequence(( 函数来解决这个问题，但它不起作用。我做错了什么？

这是我到目前为止得到的：

import 'package:audioplayers/audio_cache.dart';
import 'dart:async';
class GameScreen extends StatefulWidget {
  @override
  _GameScreenState createState() => _GameScreenState();
}
class _GameScreenState extends State<GameScreen> {
  void loadAudio() {
    final player = AudioCache();
    player.load('audio/ready-321-go-music.mp3');
  }
  void playAudio() {
    final player = AudioCache();
    player.play('audio/ready-321-go-music.mp3');
  }
  void startGameSequence() async {
    await loadAudio(); 
    playAudio();
    // After audio finishes loading / starts playing, THEN I'd like the 4-second delayed timer to start. (Currently, it seems that the time starts too early because the audio takes a bit to load.)
    Future.delayed(
      const Duration(seconds: 4),
          () => startTimer(),
    );    
  }
  Timer _timer;
  double _timeRemaining = 7.00;
  void startTimer() {
    const tick = const Duration(milliseconds: 10);
    _timer = new Timer.periodic(
      tick,
          (Timer timer) => setState(
            () {
          if (_timeRemaining < 0.01) {
            timer.cancel();
          } else {
            _timeRemaining = _timeRemaining - 0.01;
          }
        },
      ),
    );
  }
  @override
  initState() {
    super.initState();
    startGameSequence();    
  }

提前感谢您的任何帮助！

Answer 1

InitState 不是异步的，因此这无法正常工作。

一种解决方案是，在 initState(( 中加载 audioFile 并在没有Future.delayed()的情况下didUpdateWidget()函数中执行startGameSequence()。

@override
initState() {
  super.initState();
  await loadAudio();    
}
@override
void didUpdateWidget(GameScreen oldWidget) {
  startGameSequence()
  super.didUpdateWidget(oldWidget);
}
void startGameSequence() {
  playAudio();
}

此函数仅在屏幕上出现第一个布局时执行。