Jetpack Compose：如何让图标按钮独占点击事件不触发底层组件？

出现这个问题的核心是点击事件没有被TopAppBar的图标按钮消费，导致事件向下传递到底层的视频播放器组件。以下是几种可行的解决方式：

1. 使用Scaffold规范布局（最推荐） #

Compose的Scaffold组件会自动处理TopAppBar与内容区域的层级关系，给内容区域添加合适的padding避免两者重叠。同时内置的IconButton默认会消费点击事件，不会让事件穿透到下层。

示例代码：

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("视频播放器") },
            actions = {
                IconButton(onClick = {
                    // 这里写你的按钮点击逻辑，比如打开设置
                }) {
                    Icon(Icons.Filled.Settings, contentDescription = "设置")
                }
            }
        )
    }
) { paddingValues ->
    // 视频播放器组件，使用paddingValues避开TopAppBar区域
    VideoPlayer(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
            .clickable { pauseVideo() }
    )
}

2. 确保图标按钮消费点击事件 #

如果没有使用Scaffold，而是手动用Box等组件布局TopAppBar在视频播放器上方，只需使用Compose内置的IconButton即可——它内部已经实现了触摸事件的消费逻辑，点击后不会触发下层组件的点击监听。

示例代码：

Box(modifier = Modifier.fillMaxSize()) {
    VideoPlayer(
        modifier = Modifier
            .fillMaxSize()
            .clickable { pauseVideo() }
    )

    TopAppBar(
        modifier = Modifier.align(Alignment.TopStart),
        title = { Text("视频播放器") },
        actions = {
            IconButton(onClick = {
                // 按钮逻辑
            }) {
                Icon(Icons.Filled.Settings, contentDescription = "设置")
            }
        }
    )
}

3. 手动拦截触摸事件（自定义按钮场景） #

如果是自定义的图标按钮（而非内置IconButton），可以通过pointerInput修饰符手动拦截并消费触摸事件，阻止其向下传递：

示例代码：

// 自定义按钮示例
Icon(
    imageVector = Icons.Filled.Settings,
    contentDescription = "设置",
    modifier = Modifier
        .clickable { /* 按钮点击逻辑 */ }
        .pointerInput(Unit) {
            awaitPointerEventScope {
                while (true) {
                    val event = awaitPointerEvent()
                    // 消费所有触摸事件，阻止传递到下层
                    event.changes.forEach { it.consume() }
                }
            }
        }
)

4. 检查视频播放器的点击监听逻辑 #

如果视频播放器是通过pointerInput实现的点击监听，可以在回调中判断事件是否已被消费，避免重复执行暂停逻辑：

示例代码：

VideoPlayer(
    modifier = Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectTapGestures {
                // 仅当事件未被上层组件消费时，执行暂停
                if (!currentEvent.isConsumed) {
                    pauseVideo()
                }
            }
        }
)

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