如何检测蓝色区域（排除红色点击区）触发视频暂停/播放事件？

当前场景：用Rive开发时，蓝色框是Rive组件的占用区域，红色框是触发动画的点击热区。需要实现仅点击蓝色框内、红色框外的区域时，触发视频暂停/播放，而非全屏点击都执行该操作。

修改思路 #

1. 移除原代码中全屏Box的pointerInput，避免全局触发暂停/播放逻辑；
2. 给蓝色Box添加pointerInput，处理区域内的点击事件；
3. 保留红色框的clickable，让它优先消费点击事件（触发动画），这样点击红色框时不会触发蓝色Box的暂停/播放逻辑。

修改后的代码 #

@Composable
fun VideoBox(modifier: Modifier = Modifier) {
    var animation: RiveAnimationView? by remember { mutableStateOf(null) }

    Box(modifier = modifier.fillMaxSize()) {
        // 视频背景区域（仅保留背景，移除全局点击事件）
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.DarkGray)
        )

        // Rive组件容器（蓝色框区域）
        Box(
            modifier = Modifier
                .padding(end = 24.dp, bottom = 96.dp)
                .size(64.dp, 118.dp)
                .background(Color.Blue)
                .align(Alignment.BottomEnd)
                // 添加蓝色区域的点击监听
                .pointerInput(Unit) {
                    detectTapGestures(
                        onTap = {
                            Log.d("OverlappingBox", "Pause or play video")
                            // 这里替换成实际的视频暂停/播放逻辑
                        }
                    )
                }
        ) {
            AndroidView(
                factory = { context ->
                    RiveAnimationView(context).apply {
                        setRiveResource(
                            resId = R.raw.likebutton_03,
                            artboardName = "heart_Particle",
                            stateMachineName = "stateMachine",
                        )
                    }
                },
                update = { view ->
                    animation = view
                }
            )

            // 红色点击热区
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .background(Color.Red)
                    .align(Alignment.BottomCenter)
                    .clickable {
                        animation?.fireState(stateMachineName = "stateMachine", inputName = "tapTrigger")
                    }
            )
        }
    }
}

关键逻辑说明 #

• 事件消费优先级：Compose中子元素的点击事件会优先被消费。红色框的clickable会拦截点击，触发动画后不会将事件传递给父级蓝色Box；
• 区域范围控制：只有蓝色Box范围内的点击（且未被红色框拦截）才会触发暂停/播放，屏幕其他区域点击无响应，符合需求；
• 代码简化：移除全局点击监听，将暂停/播放逻辑绑定到蓝色Box，避免不必要的事件触发。

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