Jetpack Compose按返回键返回时上一屏幕状态被重置如何解决

问题本质 #

传统XML多Activity架构中，被覆盖的Activity实例会保留在返回栈中，对应的视图树、输入状态、滚动位置随实例存续，返回时直接复用即可恢复。
Jetpack Compose 结合Navigation组件的默认逻辑为：导航目的地离开栈顶位置时，对应组合上下文会被完全销毁，普通remember存储的临时状态、状态实例会被直接回收；返回栈顶时会重新执行初始组合流程，因此呈现为页面回到初始状态。

可落地解决方案 #

方案1：使用导航目的地作用域ViewModel存储页面状态（官方推荐） #

为每个导航页面单独创建对应ViewModel，将滚动状态、输入内容等页面级状态全部托管到ViewModel中，只要该目的地仍存在于返回栈内，ViewModel实例就不会被销毁，返回时可直接复用已有状态。

• 注意获取ViewModel时需要绑定到当前导航目的地的作用域，不要绑定到Activity全局作用域，避免多页面状态串扰
• 示例代码：

// 页面对应ViewModel
class FeedViewModel : ViewModel() {
    // 输入框内容
    var searchText by mutableStateOf("")
        private set
    // 列表滚动状态
    val feedScrollState = LazyListState(0)

    fun updateSearchText(text: String) {
        searchText = text
    }
}

// 导航图配置
NavHost(navController = navController, startDestination = "feed") {
    composable("feed") {
        // ViewModel作用域绑定到当前"feed"路由，返回栈内存续
        val viewModel: FeedViewModel = viewModel()
        Column {
            TextField(
                value = viewModel.searchText,
                onValueChange = { viewModel.updateSearchText(it) },
                placeholder = { Text("搜索内容") }
            )
            LazyColumn(state = viewModel.feedScrollState) {
                items(100) { index -> Text("列表项 $index") }
            }
        }
    }
    composable("detail") { /* 详情页内容 */ }
}

方案2：使用rememberSaveable存储轻量可序列化状态 #

对于输入文本、滚动位置这类轻量、可序列化的状态，可以用rememberSaveable替代普通remember，状态会被存入当前返回栈条目的SavedStateRegistry，即使组合被销毁，返回时也能从缓存中恢复。

• 注意：LazyListState、ScrollState这类复杂状态对象无法直接被rememberSaveable存储，可存储关键位置数值，页面初始化时用存储的数值重建状态实例
• 示例代码：

@Composable
fun SettingPage() {
    // 输入内容自动持久化
    var nickName by rememberSaveable { mutableStateOf("") }
    // 存储列表首个可见项位置
    var listFirstVisibleIndex by rememberSaveable { mutableStateOf(0) }
    val listState = rememberLazyListState(initialFirstVisibleItemIndex = listFirstVisibleIndex)

    // 页面离开栈顶时记录当前滚动位置
    DisposableEffect(Unit) {
        onDispose {
            listFirstVisibleIndex = listState.firstVisibleItemIndex
        }
    }

    Column {
        TextField(value = nickName, onValueChange = { nickName = it }, placeholder = { Text("输入昵称") })
        LazyColumn(state = listState) {
            items(50) { index -> Text("设置项 $index") }
        }
    }
}

常见踩坑点 #

• 若使用的navigation-compose版本低于2.5.0，跳转时需要手动开启状态保存配置，否则即使做了状态托管也会被清空：

  navController.navigate("detail") {
      popUpTo("feed") {
          saveState = true
      }
      restoreState = true
  }
  

• 大体积、不可序列化的业务数据不要存入rememberSaveable，否则会触发TransactionTooLargeException，这类数据优先放入ViewModel存储
• 不要将页面状态托管到NavHost外部的生命周期持有者，会导致状态作用域和导航目的地不匹配，出现状态丢失或串扰

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