Jetpack Compose：清除底部导航栏的保存状态

问题 #

应用流程为：登录页面→带有4个底部导航标签的主页。按照官方文档实现底部导航标签的状态保存后，遇到以下问题：

• 用户退出登录后再次登录进入主页时，底部导航标签的状态仍会保留，尽管返回登录页时已清空回退栈
• 尝试用navController.clearBackStack(route)逐个清除标签保存状态，但偶尔触发IllegalStateException，栈追踪如下：

java.lang.IllegalStateException: You cannot access the NavBackStackEntry's ViewModels until it is added to the NavController's back stack (i.e., the Lifecycle of the NavBackStackEntry reaches the CREATED state).
    at androidx.navigation.NavBackStackEntry.getViewModelStore(NavBackStackEntry.kt:197)
    at androidx.lifecycle.viewmodel.compose.ViewModelKt.get(ViewModel.kt:208)
    at androidx.lifecycle.viewmodel.compose.ViewModelKt.viewModel(ViewModel.kt:156)
    at androidx.navigation.compose.NavBackStackEntryProviderKt.SaveableStateProvider(NavBackStackEntryProvider.kt:97)
    at androidx.navigation.compose.NavBackStackEntryProviderKt.access$SaveableStateProvider(NavBackStackEntryProvider.kt:1)
    at androidx.navigation.compose.NavBackStackEntryProviderKt$LocalOwnersProvider$1.invoke(NavBackStackEntryProvider.kt:52)
    at androidx.navigation.compose.NavBackStackEntryProviderKt$LocalOwnersProvider$1.invoke(NavBackStackEntryProvider.kt:51)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228)
    at androidx.navigation.compose.NavBackStackEntryProviderKt.LocalOwnersProvider(NavBackStackEntryProvider.kt:47)
    at androidx.navigation.compose.NavHostKt$NavHost$4.invoke(NavHost.kt:162)
    at androidx.navigation.compose.NavHostKt$NavHost$4.invoke(NavHost.kt:141)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:116)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.animation.CrossfadeKt$Crossfade$5$1.invoke(Crossfade.kt:133)
    at androidx.compose.animation.CrossfadeKt$Crossfade$5$1.invoke(Crossfade.kt:128)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.animation.CrossfadeKt.Crossfade(Crossfade.kt:142)
    at androidx.compose.animation.CrossfadeKt.Crossfade(Crossfade.kt:73)
    at androidx.navigation.compose.NavHostKt.NavHost(NavHost.kt:141)
    at androidx.navigation.compose.NavHostKt.NavHost(NavHost.kt:67)
    at com.veryableops.business.AppNavigationKt.RootNavigation(AppNavigation.kt:138)
    at com.veryableops.business.MainActivity$MainApp$1$1$4.invoke(MainActivity.kt:182)
    at com.veryableops.business.MainActivity$MainApp$1$1$4.invoke(MainActivity.kt:181)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:116)
    at androidx.compose.runtime.internal.ComposableLambdaImpl$invoke$1.invoke(ComposableLambda.jvm.kt:127)
    at androidx.compose.runtime.internal.ComposableLambdaImpl$invoke$1.invoke(ComposableLambda.jvm.kt:127)
    at androidx.compose.runtime.RecomposeScopeImpl.compose(RecomposeScopeImpl.kt:162)
    at androidx.compose.runtime.ComposerImpl.recomposeToGroupEnd(Composer.kt:2465)
    at androidx.compose.runtime.ComposerImpl.skipCurrentGroup(Composer.kt:2733)
    at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3364)
    at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3342)
    at androidx.compose.runtime.SnapshotStateKt__DerivedStateKt.observeDerivedStateRecalculations(DerivedState.kt:341)
    at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(Unknown Source:1)
    at androidx.compose.runtime.ComposerImpl.doCompose(Composer.kt:3342)
    at androidx.compose.runtime.ComposerImpl.recompose$runtime_release(Composer.kt:3307)
    at androidx.compose.runtime.CompositionImpl.recompose(Composition.kt:772)
    at androidx.compose.runtime.Recomposer.performRecompose(Recomposer.kt:1047)
    at androidx.compose.runtime.Recomposer.access$performRecompose(Recomposer.kt:124)
    2023-09-24 00:53:50.754 14075-14075 AndroidRuntime          com.veryableops.business.debug       E      at androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2$2.invoke(Recomposer.kt:541)
    at androidx.compose.runtime.Recomposer$runRecomposeAndApplyChanges$2$2.invoke(Recomposer.kt:510)
    at androidx.compose.ui.platform.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame(AndroidUiFrameClock.android.kt:34)
    at androidx.compose.ui.platform.AndroidUiDispatcher.performFrameDispatch(AndroidUiDispatcher.android.kt:109)
    at androidx.compose.ui.platform.AndroidUiDispatcher.access$performFrameDispatch(AndroidUiDispatcher.android.kt:41)
    at androidx.compose.ui.platform.AndroidUiDispatcher$dispatchCallback$1.doFrame(AndroidUiDispatcher.android.kt:69)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1035)
    at android.view.Choreographer.doCallbacks(Choreographer.java:845)
    at android.view.Choreographer.doFrame(Choreographer.java:775)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1022)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loopOnce(Looper.java:201)
    at android.os.Looper.loop(Looper.java:288)
    at android.app.ActivityThread.main(ActivityThread.java:7839)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
    Suppressed: kotlinx.coroutines.DiagnosticCoroutineContextException: [androidx.compose.runtime.PausableMonotonicFrameClock@ab4be20, androidx.compose.ui.platform.MotionDurationScaleImpl@da2e3d9, StandaloneCoroutine{Cancelling}@29d519e, AndroidUiDispatcher@a0e147f]

解决方案（无需双NavHost） #

1. 基于登录状态的延迟清除 #

在登录状态切换为未登录时，通过LaunchedEffect触发底部标签栈的清除，避免在Compose重组同步调用导致的生命周期问题：

LaunchedEffect(isLoggedIn) {
    if (!isLoggedIn) {
        // 遍历所有底部导航路由，逐个清除栈状态
        listOf("home", "profile", "notifications", "settings").forEach { route ->
            // 添加try-catch避免异常，或者先判断栈是否存在该路由
            runCatching {
                navController.clearBackStack(route)
            }
        }
        // 跳转到登录页并清空回退栈
        navController.navigate("login") {
            popUpTo(navController.graph.startDestinationId) { inclusive = true }
        }
    }
}

2. 动态路由参数重置状态 #

给每个底部导航路由添加唯一会话参数（比如登录生成的UUID），每次登录时传入新参数，让NavController认为是全新路由，自动重置状态：

// 登录成功后生成新会话ID
val sessionId = UUID.randomUUID().toString()
// 跳转到主页时携带参数
navController.navigate("home?sessionId=$sessionId") {
    popUpTo("login") { inclusive = true }
}

// NavHost中定义路由时添加参数
composable(
    route = "home?sessionId={sessionId}",
    arguments = listOf(navArgument("sessionId") { nullable = true })
) {
    // 主页内容
}

3. 自定义状态持有者管理 #

封装自己的SaveableStateHolder，手动绑定底部标签的状态与登录会话，登录时清空对应存储：

// 自定义状态持有者，关联会话ID
class SessionBoundSaveableStateHolder(private val sessionId: String) {
    private val holder = SaveableStateHolder()
    private val keyPrefix = "session_$sessionId_"

    fun SaveableStateProvider(key: String, content: @Composable () -> Unit) {
        holder.SaveableStateProvider(key = keyPrefix + key, content = content)
    }

    fun clearAllStates() {
        // 清空当前会话下的所有状态
        holder.clearSavedStates()
    }
}

// 使用时，登录成功后创建新的持有者，退出时调用clearAllStates
val sessionStateHolder = remember(sessionId) { SessionBoundSaveableStateHolder(sessionId) }

异常原因分析 #

触发的IllegalStateException是因为在NavBackStackEntry的生命周期未达到CREATED状态时，就尝试访问其ViewModel或保存状态。直接在Compose重组代码中调用clearBackStack，可能会和NavController的栈更新流程产生竞态，此时对应的NavBackStackEntry还未完成入栈初始化，导致访问ViewModelStore失败。

解决方案中用LaunchedEffect或runCatching包裹调用，能避免这种竞态问题，确保在合适的时机执行栈清除操作。

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