Question

当前，正在播放和暂停动画。问题是当我按播放时，暂停按钮变为可见，但与播放动画按钮重叠。另外，按下按钮将播放已播放的音频。

5月11日更新：仍在寻找解决方案。当前，我在单击播放动画按钮后无法显示耀斑暂停动画按钮

import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

class Omm extends StatefulWidget {
  @override
  _OmmState createState() => _OmmState();
}

class _OmmState extends State<Omm>
    with SingleTickerProviderStateMixin {
  bool _isPlaying = true;
  static bool isVisible = false;

  @override
  void initState() {
    super.initState();
    _audioCache = AudioCache(
        prefix: "audio/",
        fixedPlayer: AudioPlayer()..setReleaseMode(ReleaseMode.STOP));
  }

  var flay = Visibility(
    visible: !isVisible,
    child: FlareActor('assets/playbut3.flr',
        alignment: Alignment.center,
        fit: BoxFit.contain,
        color: Color(0xFF2a9d8f),
        animation: "playbutton"),
  );

  var fause = Visibility(
    visible: isVisible,
    child: FlareActor(
      'assets/pausebutton.flr',
      alignment: Alignment.center,
      fit: BoxFit.contain,
      color: Color(0xFF2a9d8f),
      animation: "pausebutton",
    ),
  );

  AudioCache _audioCache;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(title: Text("Animation")),
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Align(
            alignment: Alignment(0, 0.5),
            child: RaisedButton(
              child: !_isPlaying ? fause : flay,
              onPressed: () {
                if (_isPlaying)
                  setState(() => isVisible = true);
                else
                  setState(() => isVisible = false);
                setState(() => _isPlaying = !_isPlaying);
                _audioCache.play('1min.mp3');
              },
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

使用FlareActor提供的isPaused方法

 FlareActor(
'assets/pausebutton.flr',
alignment: Alignment.center,
fit: BoxFit.contain,
isPaused: false,
color: Color(0xFF2a9d8f),
animation: "pausebutton",

），

其中值“ false”为布尔值，您可以放置执行Actor动作的变量。

Answer 2

您可以使用Visbility小部件，并在visibility处放置一个三进制，因此，如果正在播放，则应隐藏播放按钮并显示暂停按钮，反之亦然。

如下所示：

class _OmmState extends State<Omm> with SingleTickerProviderStateMixin {
  bool _isPlaying = true;
  bool isVisible = false;

  @override
  void initState() {
    super.initState();
    _audioCache = AudioCache(
        prefix: "audio/",
        fixedPlayer: AudioPlayer()..setReleaseMode(ReleaseMode.STOP));
  }

  var flay = Visibility(
    visible: !isVisible,
    child: FlareActor('assets/playbut3.flr',
        alignment: Alignment.center,
        fit: BoxFit.contain,
        color: Color(0xFF2a9d8f),
        animation: "playbutton"),
  );

  var fause = Visibility(
    visible: isVisible,
    child: FlareActor(
      'assets/pausebutton.flr',
      alignment: Alignment.center,
      fit: BoxFit.contain,
      color: Color(0xFF2a9d8f),
      animation: "pausebutton",
    ),
  );

  AudioCache _audioCache;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(title: Text("Animation")),
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Align(
            alignment: Alignment(0, 0.5),
            child: RaisedButton(
              child: !_isPlaying ? fause : flay,
              onPressed: () {
                if (_isPlaying)
                  setState(() => isVisible = true);
                else
                  setState(() => isVisible = false);
                setState(() => _isPlaying = !_isPlaying);
              },
            ),
          ),
        ],
      ),
    );
  }
}

Flutter：如何禁用和启用播放/暂停闪光动画？

2 个答案: