Flutter音乐播放器currentIndex不更新、切歌异常问题排查

问题根因 #

• UI层渲染歌曲标题、封面时固定使用路由传入的initialIndex参数取值，没有使用播放器实时同步的当前播放索引
• 索引流监听回调中虽然更新了currentIndex变量，但UI没有引用该变量，导致界面不会跟着切歌刷新
• 初始化逻辑缺失，首次进入播放页时没有给当前播放状态、歌曲信息赋初始值
• 监听回调没有加页面挂载判断，容易在页面销毁后触发setState报错

具体修复步骤 #

1. 替换UI层歌曲信息的取值索引 #

所有获取当前歌曲标题、封面、歌手等信息的位置，把原来写死的widget.initialIndex替换为状态里维护的currentIndex：

// 原错误写法
// widget.songsList[widget.initialIndex].title,
// QueryArtworkWidget(
//   id: widget.songsList[widget.initialIndex].id,
// )

// 修正后写法
widget.songsList[currentIndex].title,
QueryArtworkWidget(
  id: widget.songsList[currentIndex].id,
)

2. 完善initState初始化逻辑 #

在原有流监听的基础上，补充初始值赋值、播放状态监听、挂载判断：

@override
void initState() {
  super.initState();
  // 初始化当前索引、歌曲名、播放状态
  currentIndex = widget.initialIndex;
  currentSongTitle = widget.songsList[currentIndex].title;
  isPlaying = widget.audioPlayer.playing;

  // 监听当前播放索引变化
  widget.audioPlayer.currentIndexStream.listen((index) {
    if (index != null && mounted) {
      _updateCurrentPlayingSongDetails(index);
    }
  });

  // 监听播放状态变化，同步播放/暂停按钮状态
  widget.audioPlayer.playingStream.listen((playing) {
    if (mounted) {
      setState(() {
        isPlaying = playing;
      });
    }
  });
}

3. 修正切歌按钮调用逻辑 #

上一首、下一首切歌直接调用播放器自带的方法，不要手动修改本地索引变量：

// 下一首按钮点击事件
void onNextTap() {
  widget.audioPlayer.seekToNext();
}

// 上一首按钮点击事件
void onPreviousTap() {
  widget.audioPlayer.seekToPrevious();
}

4. 优化歌曲信息更新方法 #

增加索引边界判断、页面挂载判断，避免越界和内存泄漏：

void _updateCurrentPlayingSongDetails(int index) {
  if (!mounted) return;
  setState(() {
    if (widget.songsList.isNotEmpty && index >= 0 && index < widget.songsList.length) {
      currentSongTitle = widget.songsList[index].title;
      currentIndex = index;
    }
  });
}

补充说明：如果需要自定义循环、随机播放逻辑，直接通过audioPlayer.setLoopMode()、audioPlayer.setShuffleModeEnabled()方法配置即可，播放器会自动处理索引切换，不需要手动维护播放队列顺序。

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