Jetpack Compose：LazyColumn多卡片点击传参优化方案咨询

重复给每个Item组件传递onClick参数确实会导致冗余代码，尤其是当卡片类型较多时，维护起来很麻烦。下面给你两种实用的优化思路，能有效减少重复代码：

1. 封装通用点击容器组件 #

把点击跳转逻辑抽离到一个通用的容器组件中，让所有卡片Item都包裹在这个容器里，不用每个Item都单独接收onClick参数。

示例代码：

// 通用点击容器，统一处理跳转逻辑
@Composable
fun CourseCardContainer(
    course: Course,
    navController: NavController,
    content: @Composable () -> Unit
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .clickable {
                // 这里统一写跳转逻辑，比如根据course.id跳转到详情页
                navController.navigate("course_detail/${course.id}")
            }
            .padding(8.dp)
    ) {
        content()
    }
}

// 在LazyColumn中使用
LazyColumn {
    items(courseList) { course ->
        CourseCardContainer(course, navController) {
            // 根据course.id渲染对应卡片，不用传onClick
            when (course.id) {
                1 -> Item1(course)
                2 -> Item2(course)
                3 -> Item3(course)
                // 其他类型卡片...
            }
        }
    }
}

这样所有卡片的点击逻辑都集中在CourseCardContainer里，各个Item组件只需要负责渲染自身UI，不用关心跳转逻辑，彻底消除重复代码。

2. 统一Item渲染入口 #

如果你的卡片组件必须保留接收点击事件的能力，可以把类型判断和点击参数绑定的逻辑抽离到一个统一的入口函数中，避免在LazyColumn里重复写onClick传递。

示例代码：

// 统一的Item渲染入口
@Composable
fun CourseItem(
    course: Course,
    onItemClick: (Course) -> Unit
) {
    // 在这里统一绑定点击事件，不用每个分支都重复写
    val onClick = { onItemClick(course) }
    when (course.id) {
        1 -> Item1(course, onClick)
        2 -> Item2(course, onClick)
        3 -> Item3(course, onClick)
        // 其他类型...
    }
}

// LazyColumn中的使用简化为：
LazyColumn {
    items(courseList) { course ->
        CourseItem(course) { targetCourse ->
            // 这里只需要写一次跳转逻辑
            navController.navigate("course_detail/${targetCourse.id}")
        }
    }
}

这种方式把重复的onClick绑定逻辑抽到了CourseItem函数里，LazyColumn的代码会更简洁，后续新增卡片类型也只需要在CourseItem里加分支，不用改动LazyColumn部分。

关于原方案的可行性 #

如果你的卡片类型极少（比如只有2-3种），直接给每个Item传onClick的方案也能正常工作，但从可维护性角度来说，一旦卡片类型增加，冗余代码会快速膨胀，还是推荐上面的优化方案。

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