android - 音频播放完成后如何更改播放图标按钮

Question

如何让IconButton的图标在音频播放完毕后发生变化

Answer 1

我正在展示一个简单的代码，它模拟正在播放的音乐 10 秒，然后停止播放，然后图标发生变化

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SOM());
    /*
    return MaterialApp(initialRoute: 'home', routes: <String, WidgetBuilder>{
      'home': (context) => SOMain(),
      '/secondPage': (context) => DefaultScaffold("Second Screen", SOSecond()),
      '/thirdPage': (context) => DefaultScaffold("Third Screen", SOThird()),
    });

     */
  }
}

class SOM extends StatefulWidget {
  @override
  _SOMState createState() => _SOMState();
}

class _SOMState extends State<SOM> {
  bool isPlaying = false;

  IconData musicIcon = Icons.play_arrow;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: IconButton(
        icon: Icon(musicIcon),
        onPressed: toggleMusic,
      )),
    );
  }

  void toggleMusic() {
    if (!isPlaying) {
      startPlayingMusic();
    }
  }

  void startPlayingMusic() {
    setState(() {
      isPlaying = true;
      musicIcon = Icons.pause;
    });

//    faking music play for 10 seconds

    Timer(Duration(seconds: 10), () {
      setState(() {
        isPlaying = false;
        musicIcon = Icons.play_arrow;
      });
    });
  }
}

注意:如果音乐已经在播放，当前的工作不会改变状态，它只是在点击按钮后模拟音乐播放 10 秒并结束。没有别的。