UITableView实现单元格点击展示播放按钮、按播放状态控制显隐的问题

UITableView的cell复用机制，意味着滚出可视区的cell不会被销毁，会被拿回来复用到其他行渲染。之前的实现只在cell初始化的时候把useSong操作按钮设为隐藏，没有在每次cell渲染时根据当前行是否是正在播放的那一行动态重置按钮的显隐，才会出现：滑动列表后，之前持有播放按钮状态的cell被复用到未播放行，按钮残留显示。

• 第一步：在AudioListViewController中增加全局播放状态标记，用来记录当前正在播放的歌曲对应的列表行号：

  // 记录当前播放的行号，nil代表无播放中歌曲
  private var currentPlayingRow: Int?
  

• 第二步：在自定义SongsListTableViewCell中把按钮显隐的逻辑封装成统一配置入口，避免外部零散修改状态：

  class SongsListTableViewCell: UITableViewCell {
      @IBOutlet weak var useSongButton: UIButton!
      
      // 统一配置单元格的所有状态
      func updateState(isCurrentRowPlaying: Bool) {
          // 严格根据播放状态控制按钮显隐
          useSongButton.isHidden = !isCurrentRowPlaying
          // 兜底：cell复用时强制重置布局，避免状态渲染延迟
          layoutIfNeeded()
      }
      
      override func prepareForReuse() {
          super.prepareForReuse()
          // 复用前做兜底重置，避免残留上次的交互状态
          useSongButton.isHidden = true
      }
  }
  

• 第三步：在UITableView的数据源回调cellForRowAt中，每次渲染cell时都传入当前行的真实播放状态：

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      let cell = tableView.dequeueReusableCell(withIdentifier: "SongsListTableViewCell", for: indexPath) as! SongsListTableViewCell
      // 对比当前行和全局播放标记，得到当前行的播放状态
      let isRowPlaying = (indexPath.row == currentPlayingRow)
      cell.updateState(isCurrentRowPlaying: isRowPlaying)
      // 这里保留已有的收藏按钮切换逻辑、文本赋值逻辑即可
      return cell
  }
  

• 第四步：在单元格点击代理didSelectRowAt中分场景处理状态，完全匹配需求规则：
  • 当点击的行已经是当前正在播放的行：不修改全局currentPlayingRow的值，直接触发播放/暂停的切换逻辑即可。因为全局播放标记没变，cell的按钮显隐逻辑本来就是显示状态，天然满足“再次点击播放中单元格不隐藏按钮”的要求
  • 当点击的是其他未播放的行：先把currentPlayingRow更新为当前点击的行号，再遍历所有可视的cell，逐个调用之前封装的updateState方法刷新按钮状态——这样之前显示按钮的旧播放行会被自动重置为隐藏，新的当前行显示按钮，完全不会有复用残留
    对应参考代码：

  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
      // 场景1：点击当前正在播放的行
      if indexPath.row == currentPlayingRow {
          // 直接触发暂停/继续播放逻辑，不改动全局播放标记
          toggleCurrentPlayState()
          return
      }
      // 场景2：点击其他行切换播放
      currentPlayingRow = indexPath.row
      // 刷新所有可视单元格的按钮状态，避免残留
      tableView.indexPathsForVisibleRows?.forEach { indexPath in
          guard let cell = tableView.cellForRow(at: indexPath) as? SongsListTableViewCell else { return }
          cell.updateState(isCurrentRowPlaying: indexPath.row == currentPlayingRow)
      }
      // 触发加载并播放对应新音频的逻辑
      playAudio(at: indexPath.row)
  }
  

• 别把prepareForReuse当成状态控制的核心逻辑：这个方法只是cell复用时的兜底重置入口，不能依赖它决定按钮的最终显隐——如果当前行确实是播放状态，必须在数据源渲染逻辑里明确把按钮设为显示，不然就会出现状态错配
• 切换播放行时别直接全表调用reloadData：会造成列表滚动位置跳动、正在滚动的视图突然停住，遍历当前所有可视cell逐个更新状态的方式，既不会有残留，体验也更流畅

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