如何避免Jetpack Compose从详情页返回首页时重绘前序页面？

当从详情页返回首页时出现重绘，本质是首页Composable发生了不必要的重组，或者状态没有被正确保留。可以通过以下几种方式解决：

• 用rememberSaveable保存页面状态
  如果首页包含需要保留的状态（比如列表滚动位置、用户输入的筛选条件等），使用rememberSaveable替代remember，它会将状态持久化到Bundle中，在页面返回、配置变化时都能保留状态，避免因状态重置引发的重绘。

示例代码：

@Composable
fun HomeScreen() {
    // 保存列表滚动状态，返回首页时不会回到顶部
    val listState = rememberSaveable { LazyListState() }
    
    LazyColumn(state = listState) {
        items(100) { index ->
            Text(text = "列表条目 $index")
        }
    }
}

• 优化导航栈操作
  确保从首页跳转到详情页时，导航行为不会意外销毁首页实例。默认情况下，返回操作会回到栈中已存在的首页实例，但如果跳转时的配置有问题，可能导致首页被重新创建。跳转详情页时可以添加如下配置：

fun NavController.navigateToDetail() {
    navigate(Screen.Detail.route) {
        // 避免在栈中创建多个详情页实例
        launchSingleTop = true
    }
}

• 避免不必要的重组触发
  检查首页Composable的入参是否为稳定类型（使用@Stable或@Immutable注解标记数据类），如果父Composable的状态变化会传递给首页，确保这些变化是必要的，避免无关状态更新引发首页重组。

• 限制一次性操作的执行时机
  如果首页有初始化操作（比如网络请求），不要直接写在Composable根节点，而是用LaunchedEffect并指定合适的key，确保只有首次进入首页时执行，返回时不会重复执行：

@Composable
fun HomeScreen() {
    // 仅在首次进入时执行初始化逻辑
    LaunchedEffect(Unit) {
        // 加载首页数据等操作
    }
}

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