SnackBar 不显示第二次喷气背包组合

Question

我试图理解为什么我的 SnackBar 没有第二次显示，我正在从我的可组合项传播小吃栏消息和错误布尔值，我正在获取这些数据并发出单个小吃栏，但它第一次工作，而不是第二次即使我将消息设置为空，也会显示相同的消息。

当我进入注册屏幕时，如果电子邮件已存在于数据库中，我会发出一条错误消息，那么如果我再次触发相同的消息，则不会发生任何事情，并且不会出现小吃栏，有什么想法吗？

主要活动

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(showSnackBarMessage: (message: String, isError: Boolean)){ 
 when(uiState.signUpError) {
  showSnackBarMessage("E-mail already in use", true)
 }

Answer 1

您的小吃栏未显示，因为message和isError未更改。仅当引用值发生更改时，Compose 才会重新组合。

Snackbar 是一种一次性事件。所以你需要提供它作为效果

推荐：将您的message和合并isError到一个数据模型中

data class SnackBarAction(
    val uid: Long = System.currentTimeMillis(),
    val text: String,
    val isError: Boolean,
)

在您的撰写布局上

val (stateOfSnackBarAction, setSnackBarAction) = remember {
    mutableStateOf<SnackBarAction?>(null)
}
val scaffoldState = rememberScaffoldState()
val coroutineScope = rememberCoroutineScope()
Scaffold(scaffoldState = scaffoldState) {
    LaunchedEffect(key1 = stateOfSnackBarAction) {
        stateOfSnackBarAction ?: return@LaunchedEffect
        scaffoldState.snackbarHostState.showSnackbar(
            message = stateOfSnackBarAction.text,
            backgroundColor = if (stateOfSnackBarAction.isError)  Color.Red else GreenProfit,
        )
        ...
    }
    ...

显示小吃栏

Button(
    onClick = {
        coroutineScope.launch {
            val current = System.currentTimeMillis()
            setSnackBarAction(SnackBarAction(
                uid = current,
                text = "Your message here",
                isError = true/false
            ))
        }
    }