有没有办法禁用 ModalBottomSheetLayout 手势？ - 喷气背包组成

Question

I'm trying to implement google map inside the content of modal bottom sheet layout. The problem is when I try to drag on map, the modal bottom sheet is moving. I tried to find a solution for a google map to take an advantage of sheet's gestures, but with no luck.

I know that bottom sheet scaffold has option of disabling gestures, but then I can't use scrim color that is necessary in my project.

Thanks!

Answer 1

You can capture the pointer events, apply the scrolling offset directly to the map, and then mark the event as consumed, so it does not reach the parent component.

Note: This does not handle pinch to zoom or rotate.

val targetPosition = LatLng(SOME_LAT, SOME_LNG)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(targetPosition, 17f)
}

GoogleMap(
    modifier =
        Modifier.fillMaxWidth()
            .height(300.dp)
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        awaitPointerEvent(pass = PointerEventPass.Main).changes.forEach {
                            val offset = it.positionChange()
                            cameraPositionState.move(
                                CameraUpdateFactory.scrollBy(-offset.x, -offset.y)
                            )
                            it.consume()
                        }
                    }
                }
            },
    cameraPositionState = cameraPositionState,
)