Question

如何在音频播放完毕后更改IconButton图标

Answer 1

我正在显示一个简单的代码，该代码模拟播放音乐10秒钟，然后在图标更改后停止播放

{
    "book_title": "my book",
    "id": 45,
    "image": null,
    "price": 1000,
}

注意：如果已经在播放音乐，当前的工作状态不会改变，只是在单击按钮并结束后播放模拟音乐播放10秒钟。没什么。

Answer 2

创建这样的PlayerEvent：

enum PlayerEvent {
  onStartPlaying, onStopPlaying, onPausePlaying
}

并创建一个这样的BLoC：

final playerBloc = PlayerBloc();

class PlayerBloc {
  StreamController<PlayerEvent> _playerEventStreamController = StreamController.broadcast();

  Stream<PlayerEvent> get playerEventStream => _playerEventStreamController.stream;

  dispatch(PlayerEvent event) {
    _playerEventStreamController.sink.add(event);
  }


  dispose(){
    _playerEventStreamController.close();
  }
}

使用流生成器将图标包装如下：

StreamBuilder<PlayerEvent>(
    stream: playerBloc.playerEventStream,
    initialData: PlayerEvent.onStopPlaying,
    builder: (context, snapshot) {
        switch(snapshot.data) {
            case PlayerEvent.onStopPlaying:
                return Icon(Icons.play_arrow);
            case PlayerEvent.onStartPlaying:
                return Icon(Icons.pause);
            case PlayerEvent.onPausePlaying:
                return Icon(Icons.play_arrow);
        }
    }
),

现在，只要您的音乐开始播放或停止播放，只需拨打以下电话：

playerBloc.dispatch(PlayerEvent.onStartPlaying);

或

playerBloc.dispatch(PlayerEvent.onStopPlaying);

，并且您的图标会根据您的音乐而改变。

音频播放完毕后如何更改播放IconButton

2 个答案: