导航与Snackbar同时触发导致其过快消失的问题排查

问题原因 #

你的代码中存在两个核心问题导致Snackbar仅闪烁即消失：

1. LaunchedEffect作用域不稳定：你通过localState控制LaunchedEffect的执行，且在if(localState)块内直接将localState设为false，这会导致LaunchedEffect在启动后立刻被销毁，Snackbar的显示协程被强制中断。
2. 导航触发的重组干扰：导航操作会引发宿主Composable（MainActivity的setContent部分）重组，原有的临时状态逻辑被打乱，进一步加剧了Snackbar显示流程的中断。

解决方案 #

方案一：重构Snackbar触发逻辑，移除临时状态 #

直接基于snackBarMessage的变化触发Snackbar显示，确保LaunchedEffect作用域稳定：

修改MainActivity代码：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        val scaffoldState: ScaffoldState = rememberScaffoldState()
        var snackBarMessage: String? by remember { mutableStateOf(null) }
        var isError by remember { mutableStateOf(false) }

        MyTheme {
            // 监听snackBarMessage变化，自动触发Snackbar
            LaunchedEffect(snackBarMessage) {
                snackBarMessage?.let { message ->
                    scaffoldState.snackbarHostState.showSnackbar(
                        message = message,
                        duration = SnackbarDuration.Short
                    )
                    // 显示完成后清空消息，避免重复触发
                    snackBarMessage = null
                }
            }

            Scaffold(
                scaffoldState = scaffoldState,
                snackbarHost = {
                    SnackbarHost(hostState = it) { data ->
                        Snackbar(
                            snackbarData = data,
                            backgroundColor = if (!isError) GreenProfit else Color.Red,
                            contentColor = Color.White
                        )
                    }
                },
                backgroundColor = Color.Black
            ) { padding ->
                NavigationGraph(
                    modifier = Modifier.padding(bottom = padding.calculateBottomPadding()),
                    navController = navController,
                    showSnackBarMessage = { message, showError ->
                        isError = showError
                        snackBarMessage = message
                    }
                )
            }
        }
    }
}

调整ComposableA的执行顺序：

先触发Snackbar显示，再执行导航操作，确保消息已传递到全局SnackbarHost：

@Composable
fun ComposableA(showSnackBarMessage: (message: String, isError: Boolean) -> Unit) {
    // ...
    val uiState = viewModel.uiState.value
    if (uiState is ProfileState.ProfileUiState && uiState.profileScreenUiState.accountDeleted) {
        viewModel.resetVariables()
        // 先发送Snackbar消息，再执行导航
        showSnackBarMessage("Account deleted", false)
        onNavigateBackToLogin.invoke()
    }
}

方案二：用ViewModel管理Snackbar事件（更健壮的全局方案） #

通过ViewModel的SharedFlow传递Snackbar事件，彻底避免重组对显示流程的干扰：

创建全局SnackbarViewModel：

class SnackbarViewModel : ViewModel() {
    private val _snackbarEvent = MutableSharedFlow<Pair<String, Boolean>>(replay = 0)
    val snackbarEvent = _snackbarEvent.asSharedFlow()

    fun showSnackbar(message: String, isError: Boolean) {
        viewModelScope.launch {
            _snackbarEvent.emit(message to isError)
        }
    }
}

修改MainActivity代码：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val snackbarViewModel = ViewModelProvider(this)[SnackbarViewModel::class.java]
    setContent {
        val scaffoldState: ScaffoldState = rememberScaffoldState()
        var isError by remember { mutableStateOf(false) }

        MyTheme {
            // 持续监听Snackbar事件流
            LaunchedEffect(Unit) {
                snackbarViewModel.snackbarEvent.collect { (message, error) ->
                    isError = error
                    scaffoldState.snackbarHostState.showSnackbar(
                        message = message,
                        duration = SnackbarDuration.Short
                    )
                }
            }

            Scaffold(
                scaffoldState = scaffoldState,
                snackbarHost = {
                    SnackbarHost(hostState = it) { data ->
                        Snackbar(
                            snackbarData = data,
                            backgroundColor = if (!isError) GreenProfit else Color.Red,
                            contentColor = Color.White
                        )
                    }
                },
                backgroundColor = Color.Black
            ) { padding ->
                NavigationGraph(
                    modifier = Modifier.padding(bottom = padding.calculateBottomPadding()),
                    navController = navController,
                    showSnackBarMessage = { message, showError ->
                        snackbarViewModel.showSnackbar(message, showError)
                    }
                )
            }
        }
    }
}

ComposableA的调用逻辑无需额外修改，只需确保showSnackBarMessage最终调用ViewModel的showSnackbar方法即可。

内容的提问来源于stack exchange，提问作者Gastón Saillán