Jetpack Compose中SnackBar无法二次显示问题求助

问题描述 #

Jetpack Compose开发中遇到SnackBar无法二次显示的问题：通过Composable组件传递SnackBar消息与错误布尔值触发显示，首次触发正常，但即使将消息设为null，二次触发相同消息时SnackBar不再出现。具体场景：进入注册页面，若数据库已存在该邮箱则触发错误消息，再次触发时无响应。

相关代码 #

MainActivity #

setContent {
    var snackBarMessage: String? by remember { mutableStateOf(null) }
    var isError by remember { mutableStateOf(false) }
    val snackbarHostState = remember { SnackbarHostState() }

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

            LaunchedEffect(key1 = snackBarMessage) {
                if (snackBarMessage != null) {
                    snackbarHostState.showSnackbar(
                        message = snackBarMessage ?: ""
                    )
                    snackBarMessage = null
                }
            }
        }
    }
}

NavigationGraph #

NavigationGraph(showSnackBarMessage: (message: String, isError: Boolean)) {
    Navhost(...) {
        composable(route) {
            RegisterComposable(showSnackBarMessage)
        }
    }
}

RegisterComposable #

RegisterComposable(showSnackBarMessage: (message: String, isError: Boolean)){ 
    when(uiState.signUpError) {
        is SignUpError.DuplicateEmail -> showSnackBarMessage("E-mail already in use", true)
    }
}

问题原因 #

核心问题在于LaunchedEffect的触发key使用了snackBarMessage：

1. 首次触发时，snackBarMessage从null变为目标字符串，LaunchedEffect执行显示SnackBar，随后将snackBarMessage重置为null。
2. 二次触发相同消息时，snackBarMessage再次从null变为相同字符串，理论上key值变化应该触发LaunchedEffect，但由于Compose的状态更新合并机制，或showSnackbar挂起函数的执行时序问题，导致LaunchedEffect未被正确触发。
3. 若RegisterComposable中uiState.signUpError的状态未发生变化（比如用户重复点击注册按钮但错误状态持续存在），showSnackBarMessage可能不会被再次调用。

解决方案 #

方案1：使用计数器作为触发标识 #

通过递增计数器确保每次触发都能让LaunchedEffect感知到状态变化，不受消息内容影响：

修改MainActivity中的状态和逻辑：

setContent {
    // 新增计数器，每次触发递增
    var snackbarTriggerCount by remember { mutableStateOf(0) }
    var currentSnackbarMessage: String? by remember { mutableStateOf(null) }
    var isError by remember { mutableStateOf(false) }
    val snackbarHostState = remember { SnackbarHostState() }

    CryptoTheme {
        Scaffold(
            scaffoldState = scaffoldState,
            snackbarHost = {
                SnackbarHost(hostState = snackbarHostState) { data ->
                    Snackbar(
                        snackbarData = data,
                        backgroundColor = if (!isError) GreenProfit else Color.Red,
                        contentColor = Color.White
                    )
                }
            },
            bottomBar = { BottomBarNavigation(navController = navController) },
            backgroundColor = Color.Black
        ) {
            NavigationGraph(
                modifier = Modifier.padding(bottom = it.calculateBottomPadding()),
                navController = navController,
                showSnackBarMessage = { message, showError ->
                    isError = showError
                    currentSnackbarMessage = message
                    snackbarTriggerCount++ // 每次触发递增计数器
                }
            )

            // 用计数器作为LaunchedEffect的key
            LaunchedEffect(key1 = snackbarTriggerCount) {
                currentSnackbarMessage?.let { message ->
                    snackbarHostState.showSnackbar(message = message)
                    // 无需重置消息，计数器已确保下次触发能被感知
                }
            }
        }
    }
}

方案2：使用事件数据类封装状态 #

将消息和错误状态封装为独立数据类，每次触发创建新实例，确保LaunchedEffect的key值唯一：

// 定义Snackbar事件数据类
data class SnackbarEvent(val message: String, val isError: Boolean)

setContent {
    var snackbarEvent by remember { mutableStateOf<SnackbarEvent?>(null) }
    val snackbarHostState = remember { SnackbarHostState() }

    CryptoTheme {
        Scaffold(
            scaffoldState = scaffoldState,
            snackbarHost = {
                SnackbarHost(hostState = snackbarHostState) { data ->
                    // 从事件中获取错误状态
                    val isError = snackbarEvent?.isError ?: false
                    Snackbar(
                        snackbarData = data,
                        backgroundColor = if (!isError) GreenProfit else Color.Red,
                        contentColor = Color.White
                    )
                }
            },
            bottomBar = { BottomBarNavigation(navController = navController) },
            backgroundColor = Color.Black
        ) {
            NavigationGraph(
                modifier = Modifier.padding(bottom = it.calculateBottomPadding()),
                navController = navController,
                showSnackBarMessage = { message, showError ->
                    // 创建新的事件实例
                    snackbarEvent = SnackbarEvent(message, showError)
                }
            )

            LaunchedEffect(key1 = snackbarEvent) {
                snackbarEvent?.let { event ->
                    snackbarHostState.showSnackbar(message = event.message)
                    snackbarEvent = null // 重置事件
                }
            }
        }
    }
}

额外注意事项 #

确保RegisterComposable中的触发逻辑在每次需要显示SnackBar时都会调用showSnackBarMessage，比如在用户点击注册按钮的回调中触发，而不是仅依赖uiState.signUpError的初始状态变化：

RegisterComposable(showSnackBarMessage: (message: String, isError: Boolean)){ 
    Button(onClick = {
        // 点击注册按钮时执行验证
        val email = // 获取输入邮箱
        viewModel.validateEmail(email)
    }) {
        Text("注册")
    }

    // 监听viewModel的错误状态
    LaunchedEffect(viewModel.uiState.signUpError) {
        viewModel.uiState.signUpError?.let { error ->
            when(error) {
                is SignUpError.DuplicateEmail -> showSnackBarMessage("E-mail already in use", true)
            }
        }
    }
}

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