Kotlin星级评分栏实现：点击星级同步高亮前置星级

问题描述 #

我是Kotlin新手，需实现一行5颗ImageView组成的星级评分栏功能：点击第N颗星时，前N颗星（含当前点击的星）全部高亮。当前代码仅能高亮点击的单颗星，希望通过循环结合if/else语句优化现有重复代码，实现需求效果。

任务要求 #

// Input - 获取元素或数值等数据
//     星星列表（元素及索引）
//     评分值（x/5，即点击的星级数）
// Loops - FOR - 遍历元素
// Conditions - IF/ELSE - 处理元素
// Action:
//    遍历星星（star & indexOfStar）
//    设置颜色：选中的星及之前的星设为黄色

现有代码 #

val star1: ImageView = binding.star1
binding.star1.setOnClickListener {
    Log.d("Star 1","Rate 1")
    star1.setImageDrawable(ContextCompat.getDrawable(star1.context, com.example.godelreviews.R.drawable.star2))
}

val star2: ImageView = binding.star2
binding.star2.setOnClickListener {
    Log.d("Star 2","Rate 2")
    star2.setImageDrawable(ContextCompat.getDrawable(star1.context, com.example.godelreviews.R.drawable.star2))
}

val star3: ImageView = binding.star3
binding.star3.setOnClickListener {
    Log.d("Star 3","Rate 3")
    star3.setImageDrawable(ContextCompat.getDrawable(star1.context, com.example.godelreviews.R.drawable.star2))
}

val star4: ImageView = binding.star4
binding.star4.setOnClickListener {
    Log.d("Star 4","Rate 4")
    star4.setImageDrawable(ContextCompat.getDrawable(star1.context, com.example.godelreviews.R.drawable.star2))
}

val star5: ImageView = binding.star5
binding.star5.setOnClickListener {
    Log.d("Star 5","Rate 5")
    star5.setImageDrawable(ContextCompat.getDrawable(star1.context, com.example.godelreviews.R.drawable.star2))
}

return binding.root
}

private fun onRatingChanged(rating: Int){
    Log.d("AddPage", "onRatingChanged: $rating/5")
}

private fun getStarRating(): Int{
    TODO("Implement")
}
}

当前效果：仅点击的单颗星高亮；期望效果：点击第N颗星时，前N颗星全部高亮。

优化解决方案 #

核心思路 #

1. 将所有星星ImageView存入一个列表，避免重复声明和冗余代码
2. 给每颗星绑定点击事件时，通过其在列表中的索引计算当前评分值（索引+1，因为列表索引从0开始）
3. 编写统一的星星状态更新方法，用for循环遍历所有星星，结合if/else判断当前星星是否需要高亮

优化后完整代码 #

// 声明星星列表和当前评分值
private lateinit var starList: List<ImageView>
private var currentRating = 0

override fun onCreateView(...) {
    // 初始化星星列表
    starList = listOf(
        binding.star1,
        binding.star2,
        binding.star3,
        binding.star4,
        binding.star5
    )

    // 批量绑定点击事件
    starList.forEachIndexed { index, star ->
        star.setOnClickListener {
            val newRating = index + 1
            Log.d("Star ${newRating}", "Rate ${newRating}")
            updateStarStates(newRating)
            onRatingChanged(newRating)
        }
    }

    return binding.root
}

// 核心方法：循环+if/else处理星星高亮状态
private fun updateStarStates(rating: Int) {
    currentRating = rating
    starList.forEachIndexed { index, star ->
        // 前rating颗星设置为高亮图标，其余设为未选中图标
        val drawableRes = if (index < rating) {
            com.example.godelreviews.R.drawable.star2
        } else {
            // 替换为你的未高亮星星图标，比如star1
            com.example.godelreviews.R.drawable.star1
        }
        star.setImageDrawable(ContextCompat.getDrawable(star.context, drawableRes))
    }
}

private fun onRatingChanged(rating: Int){
    Log.d("AddPage", "onRatingChanged: $rating/5")
}

private fun getStarRating(): Int{
    return currentRating
}
}

代码说明 #

• 星星列表管理：用List<ImageView>统一维护5颗星，避免重复声明变量
• 批量绑定事件：通过forEachIndexed遍历列表，直接获取每颗星的索引并计算评分值
• 状态更新逻辑：updateStarStates方法中，遍历所有星星，用if(index < rating)判断是否需要高亮，前N颗星设置为黄色高亮图标，其余恢复默认状态
• 辅助方法完善：getStarRating直接返回当前保存的评分值，完成TODO实现

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