Jetpack Compose返回导航时如何避免MapScreen页面重渲染？

• 现有两个页面：MapScreen(基于Google Map SDK) 和 Search Screen
• 点击MapScreen顶部的“搜索”按钮，可导航至SearchScreen
• 在SearchScreen点击返回按钮回到MapScreen时，整个MapScreen（尤其是Google Map部分）会重新渲染，导致返回操作出现明显延迟

核心需求：避免返回导航时MapScreen发生重渲染

当前导航代码：

val navController = rememberNavController()
NavHost(
    navController = navController,
    startDestination = Route.MAP
) {
    composable(Route.MAP) {
        MapScreen(onNextClick = {
            navController.navigate(Route.SEARCH)
        })
    }
    composable(Route.SEARCH) {
        SearchScreen()
    }
}

1. 用remember/rememberSaveable留存Map核心状态 #

在MapScreen内部，将Map实例、相机位置等核心状态用remember或rememberSaveable持有，防止重组时重新初始化：

@Composable
fun MapScreen(onNextClick: () -> Unit) {
    // 留存MapView实例，避免每次重组重建
    val mapView = remember { MapView(LocalContext.current) }
    // 留存相机位置状态
    val cameraPositionState = rememberCameraPositionState()

    // Google Map渲染逻辑
    AndroidView(factory = { mapView }) { view ->
        // 初始化Map逻辑...
    }

    // 顶部搜索按钮等UI
    TopAppBar(
        title = { Text("地图") },
        actions = {
            IconButton(onClick = onNextClick) {
                Icon(Icons.Default.Search, contentDescription = "搜索")
            }
        }
    )
}

2. 调整导航栈行为 #

从MapScreen跳转至SearchScreen时，配置launchSingleTop并合理管理栈，确保MapScreen实例在栈中保留：

// MapScreen中触发跳转的代码
navController.navigate(Route.SEARCH) {
    // 确保SearchScreen在栈顶时不会重复创建
    launchSingleTop = true
    // 可选：如果不需要保留SearchScreen在返回栈中，可添加以下配置
    // popUpTo(Route.MAP) { inclusive = false }
}

3. 封装Map核心内容为remember的Composable #

将Google Map的核心渲染逻辑封装在remember创建的Composable中，隔离外部重组的影响：

@Composable
fun MapScreen(onNextClick: () -> Unit) {
    // 用remember留存Map内容的Composable，避免外部UI变化触发Map重组
    val mapContent = remember {
        @Composable {
            GoogleMap(
                cameraPositionState = rememberCameraPositionState(),
                modifier = Modifier.fillMaxSize()
            ) {
                // 添加Marker等逻辑...
            }
        }
    }

    Column(modifier = Modifier.fillMaxSize()) {
        TopAppBar(
            title = { Text("地图") },
            actions = { IconButton(onClick = onNextClick) { Icon(Icons.Default.Search, null) } }
        )
        mapContent()
    }
}

4. 消除不必要的重组触发点 #

检查是否有频繁变化的参数导致MapScreen重组：

• 确保传递给MapScreen的回调用remember包裹，避免每次重组生成新的lambda：

composable(Route.MAP) {
    val onSearchClick = remember {
        { navController.navigate(Route.SEARCH) }
    }
    MapScreen(onNextClick = onSearchClick)
}

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