Flutter中如何在ListView.builder外获取列表索引实现音频播放对应高亮

核心错误原因 #

• 全局变量itemIndex会在ListView.builder构建所有列表项的过程中被持续覆盖，最终值等于列表最后一项的索引，导致点击播放按钮永远传递最后一个索引，触发固定高亮第5项的问题
• 原有逻辑仅在音频播放完成时将高亮索引固定为初始传入的固定值，不会跟随播放列表当前播放的曲目动态更新索引，因此播放下一首时高亮不会同步变化

修改步骤 #

1. 新增状态变量 #

替换原有全局变量，增加监听销毁变量避免内存泄漏

int? highlightedIndex;
int? selectedPlayIndex; // 存储用户选中的播放起始索引，替换原有itemIndex
StreamSubscription? _audioIndexSub; // 音频索引变化监听的销毁句柄

2. 新增列表项选中逻辑 #

在ListView.builder的GestureDetector中增加点击选中逻辑，点击对应列表项时记录选中索引

GestureDetector(
  onTap: (){
    setState(() {
      selectedPlayIndex = index;
    });
  },
  // 原有Card代码保持不变
)

3. 重构音频播放方法 #

调整监听逻辑，跟随播放进度自动更新高亮索引

void playAudioNetwork(int startIndex) async{
  // 先销毁旧的监听，避免重复触发回调
  _audioIndexSub?.cancel();
  Playlist playlist;
  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));
  }
  playlist = Playlist(audios: _audios);
  // 初始化高亮当前播放的起始项
  setState(() {
    highlightedIndex = startIndex;
  });
  // 监听播放列表的索引变化，切歌时自动更新高亮
  _audioIndexSub = audioPlayer.onIndexChanged.listen((newPlayIndex) {
    if(newPlayIndex != null){
      setState(() {
        // 如果播放列表顺序和列表项顺序一一对应，可直接赋值highlightedIndex = newPlayIndex
        highlightedIndex = startIndex + newPlayIndex;
      });
    }
  });
  await audioPlayer.open(
    playlist,
    autoStart: true,
    showNotification: true,
  );
}

4. 修改底部播放按钮逻辑 #

增加非空判断避免空索引报错

FloatingActionButton(
  onPressed: () {
    if(selectedPlayIndex != null){
      playAudioNetwork(selectedPlayIndex!);
    }
  },
  // 原有样式代码保持不变
)

5. 增加资源销毁逻辑 #

在页面销毁时释放监听资源，避免内存泄漏

@override
void dispose() {
  _audioIndexSub?.cancel();
  audioPlayer.dispose();
  super.dispose();
}

原有TextSpan的背景色判断逻辑无需修改，即可实现播放时对应列表项高亮、切歌自动同步高亮的效果。

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