Flutter 音频播放时如何指定高亮列表特定索引的背景色

问题根因 #

你当前所有列表项同步变色的核心原因是用了全局布尔变量ishighlight控制所有列表项的背景色，没有绑定对应索引，所以状态一变所有项都会同步变更。

解决方案 #

1. 替换状态变量

把原有的全局布尔高亮状态，替换为存储当前播放索引的整型变量：

// 废弃原有状态
// bool ishighlight = false;
// 新状态：存储当前正在播放的音频索引，初始为0表示默认高亮第一首，为null则无高亮
int? currentPlayingIndex = 0;

2. 修改列表项高亮判断逻辑

仅在当前列表项的索引和正在播放的索引匹配时，显示高亮背景：

text: TextSpan(
  text: arabic,
  style: TextStyle(
    color: getTextColor(index),
    backgroundColor: currentPlayingIndex == index ? Colors.blue : Colors.white,
    fontSize: 24.0,
    fontWeight: FontWeight.w200,
    fontFamily: 'uthmanitext', 
  ),
)

3. 优化音频播放逻辑，同步更新高亮索引

直接监听播放器的当前播放索引变更事件，比单独监听播放完成事件更准确，可以覆盖快进、快退、手动切歌等场景：

void playAudioNetwork() async{
  List<Audio> _audios = [];
  for (int i =1;i<=7;i++) {
    String url= 'https://everyayah.com/data/Ayman_Sowaid_64kbps/00100${i}.mp3';
    _audios.add(Audio.network(url));
  }
  final playlist = Playlist(audios: _audios);
  
  // 监听播放索引变化，自动同步高亮状态
  audioPlayer.currentIndex.listen((newIndex) {
    setState(() {
      currentPlayingIndex = newIndex;
      // 可选：播放完全部音频后取消高亮
      if (currentPlayingIndex == _audios.length) {
        currentPlayingIndex = null;
      }
    });
  });

  await audioPlayer.open(
    playlist,
    autoStart: true,
    showNotification: true,
  );
}

内容的提问来源于stack exchange，提问作者Noor