android - 在 Jetpack Compose 中保持 Google map 状态

Question

我正在尝试构建一个导航到多个不同屏幕的应用程序(使用底部导航)。
其中一个屏幕，startDestination ，是谷歌地图 View ，查看 Official compose example: Crane让它工作，它确实如此。
但是，当导航到另一个屏幕并返回时，MapView重新组合并缓慢加载。我们从初始相机位置、缩放级别等开始。可能有办法 remember并重新应用这些属性，但我更感兴趣的是保持谷歌地图 View 的完整状态。 (查看当前适用于 Android 的 Google Maps 应用程序，它完全符合我的要求，尽管他们没有使用 Jetpack Compose)
有没有办法做到这一点？
我已经 remember MapView

@Composable
fun rememberMapViewWithLifecycle(): MapView {
    val context = LocalContext.current
    val mapView = remember {
        MapView(context).apply {
            id = R.id.map
        }
    }

    val lifecycle = LocalLifecycleOwner.current.lifecycle
    DisposableEffect(lifecycle, mapView) {
        // Make MapView follow the current lifecycle
        val lifecycleObserver = getMapLifecycleObserver(mapView)
        lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycle.removeObserver(lifecycleObserver)
        }
    }

    return mapView
}

private fun getMapLifecycleObserver(mapView: MapView): LifecycleEventObserver =
    LifecycleEventObserver { _, event ->
        when (event) {
            Lifecycle.Event.ON_CREATE -> mapView.onCreate(Bundle())
            Lifecycle.Event.ON_START -> mapView.onStart()
            Lifecycle.Event.ON_RESUME -> mapView.onResume()
            Lifecycle.Event.ON_PAUSE -> mapView.onPause()
            Lifecycle.Event.ON_STOP -> mapView.onStop()
            Lifecycle.Event.ON_DESTROY -> mapView.onDestroy()
            else -> throw IllegalStateException()
        }
    }

为了提供更多上下文， MapView位于此屏幕的顶部

@ExperimentalMaterialApi
@Composable
fun MapsScreen(
    modifier: Modifier = Modifier,
    viewModel: EventViewModel = viewModel()
) {
    ...
    val mapView = rememberMapViewWithLifecycle()
    MapsScreenView(modifier, uiState, mapView)
}

我尝试过的完全不同的方法是通过 BackdropScaffold (在 Scaffold 中，因为我想要 BottomBar ..)其中 backLayerContent是 MapsScreen()和 frontLayerContent是其他屏幕，“正面”配置为在 Activity 时将覆盖整个屏幕。这感觉真的很丑陋和可怕，但它有点工作..

Scaffold(
    topBar = {
        SmallTopAppBar(
            title = { Text(text = "Test") },
        )
    },
    bottomBar = {
        BottomBar(navController) { screen ->
            showMaps = screen == Screen.MainMaps
            coroutineScope.launch {
                if (showMaps) scaffoldState.reveal() else scaffoldState.conceal()
            }
        }
    },
    content = { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            BackdropScaffold(
                scaffoldState = scaffoldState,
                appBar = { },
                frontLayerContent = {
                    EventsScreen()
                },
                backLayerContent = {
                    MapsScreen()
                },
                peekHeight = if (showMaps) 300.dp else 0.dp,
                headerHeight = if (showMaps) BackdropScaffoldDefaults.HeaderHeight else 0.dp,
                gesturesEnabled = showMaps
            )
        }
    }
)

有没有人遇到同样的问题并找到了实际的解决方案？ (我想我们真的需要 Jetpack Compose 支持，而不是 AndroidView 方法)

Answer 1

Google 刚刚发布了一个库来处理 MapView 状态 Android-Maps-Compose

val cameraPositionState: CameraPositionState = rememberCameraPositionState()
GoogleMap(cameraPositionState = cameraPositionState)
Button(onClick = { cameraPositionState.move(CameraUpdateFactory.zoomIn()) }) { 
 Text(text = "Zoom In") 
}