嵌套在Card中的GoogleMap点击事件抢占问题求助

方案1：禁用GoogleMap的所有手势（适合仅展示地图的场景） #

通过GoogleMap的uiSettings参数关闭所有交互手势，让地图不再消费点击事件，Card的onClick就能正常触发。

修改后的代码：

Card(
    modifier = modifier,
    shape = CutCornerShape(0),
    elevation = CardDefaults.cardElevation(10.dp),
    onClick = { onCardClick.invoke() }
) {
    Box(
        modifier = modifier
            .height(IntrinsicSize.Max)
            .width(IntrinsicSize.Max)
    ) {
        GoogleMap(
            modifier = Modifier.fillMaxSize(),
            cameraPositionState = positionState,
            uiSettings = remember {
                MapUiSettings(
                    zoomControlsEnabled = false,
                    scrollGesturesEnabled = false,
                    zoomGesturesEnabled = false,
                    tiltGesturesEnabled = false,
                    rotateGesturesEnabled = false
                )
            }
        ) {
            //...
        }
        //...
    }
}

方案2：保留地图手势同时让Card响应点击（需操作地图的场景） #

在GoogleMap上层叠加一个透明Box，通过它拦截点击事件并触发Card的回调，同时不影响地图的缩放、拖动等手势操作。

修改后的代码：

Card(
    modifier = modifier,
    shape = CutCornerShape(0),
    elevation = CardDefaults.cardElevation(10.dp),
    onClick = { onCardClick.invoke() }
) {
    Box(
        modifier = modifier
            .height(IntrinsicSize.Max)
            .width(IntrinsicSize.Max)
    ) {
        GoogleMap(
            modifier = Modifier.fillMaxSize(),
            cameraPositionState = positionState
        ) {
            //...
        }
        // 透明Box处理点击，触发Card回调
        Box(
            modifier = Modifier
                .fillMaxSize()
                .pointerInput(onCardClick) {
                    detectTapGestures(
                        onPress = {
                            onCardClick.invoke()
                            awaitRelease()
                        }
                    )
                }
        )
        //...
    }
}

补充说明 #

• 方案1实现最简单，完全关闭地图交互，适合只需要展示地图的场景。
• 方案2兼顾地图操作和Card点击，适合需要同时使用两种交互的场景。

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