JetPack Compose中如何在ModalBottomSheet内平移GoogleMap组件

当在ModalBottomSheet里嵌入GoogleMap时，拖拽地图会触发底部弹窗的拖拽行为，这是因为触摸事件被ModalBottomSheet优先拦截了。要让地图能正常响应平移操作，核心是让GoogleMap区域的触摸事件被优先消费，不向上传递给弹窗组件。

这里提供两种可行的解决方案：

方案一：直接拦截地图区域的触摸事件 #

给GoogleMap添加pointerInput修饰符，拦截并消费所有触摸事件，这样ModalBottomSheet就不会接收到这些事件，自然不会触发拖拽：

ModalBottomSheet(onDismissRequest = { }) {
    GoogleMap(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        val event = awaitPointerEvent()
                        // 消费所有触摸事件，阻止传递给父组件
                        event.changes.forEach { it.consume() }
                    }
                }
            }
    ) {
        // 地图标记、控件等内容
    }
}

方案二：动态控制弹窗的可拖拽状态 #

如果需要保留弹窗在非地图区域的拖拽能力，可以通过状态变量控制ModalBottomSheet是否允许拖拽：

val sheetState = rememberModalBottomSheetState()
var isMapBeingTouched by remember { mutableStateOf(false) }

ModalBottomSheet(
    onDismissRequest = { },
    sheetState = sheetState
) {
    GoogleMap(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectTapGestures(
                    onPress = {
                        // 触摸地图时标记状态，禁止弹窗拖拽
                        isMapBeingTouched = true
                        // 等待触摸释放后恢复状态
                        tryAwaitRelease()
                        isMapBeingTouched = false
                    }
                )
            }
    ) {
        // 地图内容
    }
}

方案一适合整个弹窗内容都是地图的场景，方案二更灵活，能兼顾弹窗其他区域的拖拽需求。

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