如何在撰写中将 Google 地图动画设置为全屏？

Question

我的 Android 撰写应用程序在具有垂直滚动的列中显示地图（如预览）。 地图显示在框中，全屏图标位于底部。 当用户点击全屏图标时如何使用全屏地图？

我尝试给地图框 fillMasSize 修改器，但它不起作用。

Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .fillMaxSize()
            .background(Color.Red.copy(alpha = 0.1f))
            .padding(innerPadding)
            .padding(horizontal = 5.dp)
    ) {

        Text(
            text = "Search",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier.padding(5.dp)
        )

        SearchCard(
            state = searchVM,
            onEvent = searchVM,
        )

        Card(
            modifier = Modifier
                .padding(horizontal = 30.dp, vertical = 10.dp)
                .fillMaxWidth()
                .height(40.dp)
                ,
            elevation = CardDefaults.cardElevation(defaultElevation = 15.dp),
            colors = CardDefaults.cardColors(containerColor = Color.White)
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Search", textAlign = TextAlign.Center)
            }
        }

        Text(
            text = "Map",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier.padding(start = 5.dp)
        )

        Box(
            modifier = Modifier
                .size(400.dp)
                .padding(10.dp)
                .clip(shape = RoundedCornerShape(10.dp))

        ) {
            GoogleMap(
                modifier = Modifier.fillMaxSize(),
                cameraPositionState = cameraPositionState
            )
            Box(
                modifier = Modifier
                    .align(Alignment.TopEnd)
                    .padding(10.dp)
            ) {
                Icon(imageVector = Icons.Default.Fullscreen, contentDescription = null,
                    modifier = Modifier
                        .size(30.dp)
                        .clickable {
                            isFullScreen = !isFullScreen
                        }
                )
            }
        }

        Text(
            text ="Hello",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            modifier = Modifier.padding(start = 5.dp)
        )

        buttonList.list.chunked(2).forEach { rowItems ->
            ListCards(
                searchVM = searchVM,
                cardList = rowItems,
                navController = navController
            )
        }

        SocialMediaAndAboutUs()
    }
}

Answer 1

首先，您必须为常规地图视图和全屏地图视图定义一个单独的视图，一个使用此代码，另一个使用可与 fillMaxSize 组合的 GoogleMap，或者您可以根据条件隐藏/显示其他视图。然后使用状态变量隐藏/显示全屏 MapView，

 var isFullscreen by remember { mutableStateOf(false) }

  if (isFullscreen) {
       FullscreenMap(onClose = { isFullscreen = false })
  } else {
       RegularMapView(onFullscreenClick = { isFullscreen = true })
  }

通过此用途可以在这些视图之间切换。如果您需要在全屏和常规视图之间进行动画处理，那么您可以使用动画的动画可见性。

 AnimatedVisibility(visible = isFullscreen) {
   FullscreenMap(onClose = { /* handle close */ })
 }

在此视图之间切换时，您可以定义任何动画。

如果您想在坐标之间更改相机视图时在 GoogleMap Composable 中平滑动画，那么您可以使用它，

cameraPositionState.animate(CameraUpdateFactory.newLatLngZoom(initialLocation.value, 15f), durationMs = 500)