如何让父/子Composable触发点击时同时执行双方的点击事件？

在Compose中，默认clickable修饰符会消费点击事件，导致子组件的点击会阻断父组件的点击事件响应。要让父子组件的点击事件都触发，可通过以下两种方式实现：

方案一：修改子组件的clickable参数，允许事件向上传递 #

如果子Composable eventContent 内部使用了clickable修饰符，只需将其consumeClick参数设为false，这样点击子组件时，既会触发自身的点击逻辑，也会让事件继续向上传递到父组件的clickable：

// 子Composable eventContent的修改示例
@Composable
fun EventContent(
    studentScore: Any,
    listIndex: Int,
    index: Int,
    onEvent: () -> Unit
) {
    Box(
        modifier = Modifier
            .clickable(
                onClick = { onEvent() },
                consumeClick = false // 关键：不消费点击事件，让父组件也能响应
            )
    ) {
        // 子组件内容区域
    }
}

父组件保持原有clickable逻辑即可：

Box(
    modifier = Modifier
        .width(sideBarWidth)
        .height(headerHeight)
        .clickable {
            // 父组件的点击处理逻辑
        }
) {
    eventContent(
        studentScore = cell,
        listIndex = it1,
        index = i,
        onEvent = onEvent
    )
}

方案二：统一逻辑调用，子组件触发时主动执行父逻辑 #

如果需要更灵活的逻辑控制，可以让子组件的点击事件同时调用自身逻辑和父组件的逻辑：

1. 父组件定义自身的点击逻辑函数：

val parentOnClick = {
    // 父组件的点击处理逻辑
}

2. 子组件接收父逻辑并在点击时同时执行：

@Composable
fun EventContent(
    studentScore: Any,
    listIndex: Int,
    index: Int,
    onEvent: () -> Unit,
    parentOnClick: () -> Unit
) {
    Box(
        modifier = Modifier
            .clickable {
                onEvent() // 执行子组件自身逻辑
                parentOnClick() // 主动触发父组件逻辑
            }
    ) {
        // 子组件内容区域
    }
}

3. 父组件调用子组件时传入自身逻辑：

val parentOnClick = {
    // 父组件的点击处理逻辑
}

Box(
    modifier = Modifier
        .width(sideBarWidth)
        .height(headerHeight)
        .clickable(parentOnClick)
) {
    eventContent(
        studentScore = cell,
        listIndex = it1,
        index = i,
        onEvent = onEvent,
        parentOnClick = parentOnClick
    )
}

注意事项 #

• 使用consumeClick = false时，事件传递顺序为：子组件逻辑先执行，随后触发父组件逻辑。
• 若子组件内部有多个可点击元素，需为每个元素单独设置consumeClick或主动调用父逻辑。

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