问题根源：

1. @State playtype 是响应式变量，改变时会触发UI更新
2. this.wlPlayer?.isPlaying() 不是响应式变量，其返回值改变时不会触发UI更新

使用响应式状态变量

import {
  WlAudioInterruptHint,
  WlAudioInterruptType,
  WlCompleteType,
  WlComponentController,
  WlLoadStatus,
  WlPlayer
} from "@ywl5320/libwlmedia";

// 使用响应式状态变量追踪播放状态
[@State](/user/State) isPlaying: boolean = false  // true=正在播放, false=已暂停

Image(this.isPlaying ?
      $r("app.media.pause_white_file") :  // 正在播放显示暂停图标
      $r("app.media.start_white_file"))   // 已暂停显示播放图标
  .width(30)
  .height(50)
  .objectFit(ImageFit.Contain)
  .margin({right: 10})
  .onClick((v) => {
    // 检查是否需要切换音源
    if (this.wlPlayer?.getSource() != mo.uri) {
      // 不同音源，先停止当前播放
      if (this.wlPlayer?.isPlaying()) {
        this.wlPlayer.pause()
      }

      // 设置新音源并播放
      this.wlPlayer?.setSource(mo.uri);
      this.wlPlayer?.prepare();

      // 更新状态为播放中
      this.isPlaying = true
    }
    else {
      // 同一音源，切换播放/暂停状态
      if (this.isPlaying) {
        // 当前正在播放，执行暂停
        this.wlPlayer?.pause()
        this.isPlaying = false
      }
      else {
        // 当前已暂停，执行播放
        this.wlPlayer?.resume()  // 使用 resume() 继续播放
        this.isPlaying = true
      }
    }
  })

监听播放器状态变化

如果播放器提供了状态变化回调，可以这样实现：

[@State](/user/State) isPlaying: boolean = false

aboutToAppear() {
  // 监听播放器状态变化
  this.wlPlayer?.setOnStatusChangedListener((status) => {
    // 根据播放器状态更新响应式变量
    this.isPlaying = this.wlPlayer?.isPlaying() ?? false
  })

  // 监听播放完成事件
  this.wlPlayer?.setOnCompleteListener(() => {
    this.isPlaying = false
  })

  // 监听播放错误
  this.wlPlayer?.setOnErrorListener((error) => {
    this.isPlaying = false
  })
}

Image(this.isPlaying ?
      $r("app.media.pause_white_file") :
      $r("app.media.start_white_file"))
  .width(30)
  .height(50)
  .objectFit(ImageFit.Contain)
  .margin({right: 10})
  .onClick((v) => {
    if (this.wlPlayer?.getSource() != mo.uri) {
      this.wlPlayer?.setSource(mo.uri);
      this.wlPlayer?.prepare();
      // 状态会通过监听器自动更新
    }
    else {
      if (this.isPlaying) {
        this.wlPlayer?.pause()
        // 状态会通过监听器自动更新
      }
      else {
        this.wlPlayer?.resume()
        // 状态会通过监听器自动更新
      }
    }
  })

使用 @Watch 装饰器

[@State](/user/State) [@Watch](/user/Watch)('onPlayerStateChange') isPlaying: boolean = false

// 当 isPlaying 改变时自动调用
onPlayerStateChange() {
  console.info('播放状态改变:', this.isPlaying)
}

Image(this.isPlaying ?
      $r("app.media.pause_white_file") :
      $r("app.media.start_white_file"))
  .width(30)
  .height(50)
  .objectFit(ImageFit.Contain)
  .margin({right: 10})
  .onClick((v) => {
    this.togglePlayState()
  })

private togglePlayState() {
  if (this.wlPlayer?.getSource() != mo.uri) {
    this.wlPlayer?.setSource(mo.uri);
    this.wlPlayer?.prepare();
    this.isPlaying = true
  }
  else {
    if (this.isPlaying) {
      this.wlPlayer?.pause()
      this.isPlaying = false
    }
    else {
      this.wlPlayer?.resume()
      this.isPlaying = true
    }
  }
}

1. 鸿蒙的响应式系统只能追踪被 @State、@Prop、@Link 等装饰器修饰的变量