Swift 5 如何检测table view中新增数据所在行并高亮对应行

核心逻辑步骤 #

• 第一步：新增活动时先拿到新增活动的日期字段，和已有的排序后的活动数组做匹配，找到插入后的索引位置
  • 因为列表本身已经是按日期升/降序排列的，可以用二分查找法快速定位插入下标，比遍历效率更高，数据量越大优势越明显
• 第二步：更新数据源数组，将新增活动插入到刚才找到的索引位置
• 第三步：刷新table view对应位置的行，同时标记该行需要高亮
  • 不要全局reload整个table view，用局部刷新方法性能更好，比如iOS的reloadRows(at:with:)、Android RecyclerView的notifyItemInserted()、前端表格组件的局部更新方法
• 第四步：在table view的行渲染回调里判断当前行是否是刚插入的高亮行，是的话就添加边框样式
  • 可以给新增的活动对象加一个临时的isHighlighted布尔字段，渲染行的时候读取这个字段判断是否加边框，高亮持续一段时间后可以自动把这个字段设为false再刷新行取消高亮

不同平台具体实现参考 #

iOS (Swift) #

// 1. 找到插入索引
let targetDate = newActivity.date
let insertIndex = activityList.firstIndex { $0.date > targetDate } ?? activityList.count

// 2. 插入数据源并标记高亮
activityList.insert(newActivity, at: insertIndex)
activityList[insertIndex].isHighlighted = true

// 3. 局部刷新tableView
let indexPath = IndexPath(row: insertIndex, section: 0)
tableView.insertRows(at: [indexPath], with: .automatic)

// 4. cellForRow代理里处理边框样式
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ActivityCell", for: indexPath) as! ActivityCell
    let activity = activityList[indexPath.row]
    if activity.isHighlighted {
        cell.layer.borderWidth = 2
        cell.layer.borderColor = UIColor.systemBlue.cgColor
        cell.layer.cornerRadius = 4
        // 可选：3秒后自动取消高亮
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            activity.isHighlighted = false
            tableView.reloadRows(at: [indexPath], with: .automatic)
        }
    } else {
        cell.layer.borderWidth = 0
    }
    // 其他cell赋值逻辑
    return cell
}

Android (Kotlin) #

// 1. 找插入索引
val insertIndex = activityList.indexOfFirst { it.date.time > newActivity.date.time }.let { 
    if (it == -1) activityList.size else it 
}

// 2. 插入并标记高亮
newActivity.isHighlighted = true
activityList.add(insertIndex, newActivity)

// 3. 通知适配器插入
adapter.notifyItemInserted(insertIndex)

// 4. onBindViewHolder里处理样式
override fun onBindViewHolder(holder: ActivityViewHolder, position: Int) {
    val activity = activityList[position]
    if (activity.isHighlighted) {
        holder.itemView.apply {
            setBackgroundResource(R.drawable.highlight_border)
            // 3秒后取消高亮
            postDelayed({
                activity.isHighlighted = false
                notifyItemChanged(position)
            }, 3000)
        }
    } else {
        holder.itemView.background = null
    }
    // 其他赋值逻辑
}

前端 (Vue + Element UI) #

<template>
  <el-table :data="activityList" :row-class-name="getRowClassName">
    <!-- 表格列配置 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      activityList: []
    }
  },
  methods: {
    addActivity(newActivity) {
      // 1. 找插入索引
      const insertIndex = this.activityList.findIndex(item => item.date > newActivity.date)
      const finalIndex = insertIndex === -1 ? this.activityList.length : insertIndex
      // 2. 插入并标记高亮
      newActivity.isHighlighted = true
      this.activityList.splice(finalIndex, 0, newActivity)
      // 3. 3秒后取消高亮
      setTimeout(() => {
        newActivity.isHighlighted = false
      }, 3000)
    },
    getRowClassName({ row }) {
      return row.isHighlighted ? 'highlight-border' : ''
    }
  }
}
</script>

<style scoped>
.highlight-border {
  border: 2px solid #409eff !important;
  border-radius: 4px;
}
</style>

注意事项 #

• 如果同一天有多个活动，可以额外加活动ID、创建时间等字段作为二级排序依据，避免插入索引定位错误
• 高亮状态不要直接存在cell复用池里，必须绑定到数据源的字段上，避免table view滚动时cell复用导致高亮错位
• 临时高亮的场景记得加自动取消逻辑，避免页面上一直存在多个高亮行影响用户体验

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