Jetpack Compose 点击按钮后Snackbar不显示的问题如何解决

问题核心原因 #

• 外层RegisterLocation的状态分支逻辑错误：当uiState变为LocationUiState.Invalid时，你只在分支内执行了showSnackbar的协程，没有渲染包含SnackbarHost的布局组件，此时SnackbarHost已经被移出合成树，自然无法显示Snackbar，你看到的底部文本上移只是状态切换瞬间的重组动画残留。
• 缺少状态重置逻辑：Snackbar显示完成后没有将uiState重置为初始状态，会导致后续无法重复触发错误提示。

修复方案 #

1. 调整状态分支逻辑，保证Init和Invalid状态下都渲染主布局，将Snackbar触发逻辑独立为全局监听的LaunchedEffect
2. 新增状态重置逻辑，Snackbar显示完成后将uiState切回初始状态

修复后代码示例

@Composable
fun RegisterLocation(
    navController: NavController,
    locationVm: LocationViewModel = LocationViewModel()
) {
    val uiState = locationVm.locationState.collectAsState(LocationUiState.Init)
    val snackbarHostState = remember { SnackbarHostState() }

    // 全局监听状态变化，触发Snackbar
    LaunchedEffect(uiState.value) {
        if (uiState.value is LocationUiState.Invalid) {
            snackbarHostState.showSnackbar("Failed Creating Location. Try Again!!!")
            // 显示完成后重置状态为初始值，需要在ViewModel中实现该方法
            locationVm.resetStateToInit()
        }
    }

    when (uiState.value) {
        // Init和Invalid状态都渲染主布局
        is LocationUiState.Init, is LocationUiState.Invalid -> RegisterLocation(locationVm, snackbarHostState)
        is LocationUiState.Valid -> navController.popBackStack()
    }
}

在LocationViewModel中新增重置状态的方法：

fun resetStateToInit() {
    _locationState.value = LocationUiState.Init
}

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