Material3中Snackbar无法正常显示问题求助

我正在使用Material3，无法让Snackbar正常显示。该代码在Material2中可以正常运行：调用Snackbar时布局列会下移，但显示时长极短（远短于短时长Snackbar）且无消息展示。我仅修改了原Material2中的snackbarData.message为snackbarData.visuals.message，不确定还有哪里出错。

相关代码如下：

@Composable
fun Snackbar(snackbarHostState: SnackbarHostState) {
    SnackbarHost(
        hostState = snackbarHostState,
        snackbar = { snackbarData: SnackbarData ->
            Card(
                shape = RoundedCornerShape(10.dp),
                modifier = Modifier
                    .padding(20.dp)
                    .wrapContentSize()
            ) {

                Text(text = snackbarData.visuals.message, fontSize = 30.sp)

            }
        }
    )
}
@Composable
fun LaunchSnackbar (snackbarHostState: SnackbarHostState, message: String) {
    LaunchedEffect(true) {
        snackbarHostState.showSnackbar(message = message)
    }
}
val snackbarHostState = remember { SnackbarHostState() }
Snackbar(snackbarHostState)
LaunchSnackbar(snackbarHostState = snackbarHostState, message = "Incorrect")

解决方案 #

你的代码存在三个核心问题，对应修复方式如下：

1. LaunchedEffect 触发逻辑错误 #

使用LaunchedEffect(true)会导致Composable每次重组时都重复调用showSnackbar，Snackbar被频繁替换后就会出现显示时长极短的现象。

修复代码：
将LaunchedEffect的key改为message，仅当消息内容变化时才触发显示：

@Composable
fun LaunchSnackbar(snackbarHostState: SnackbarHostState, message: String) {
    LaunchedEffect(message) {
        snackbarHostState.showSnackbar(message = message)
    }
}

2. 自定义Snackbar缺少生命周期处理与内边距 #

Material3中自定义Snackbar需要处理dismissEvent来保证生命周期正常，同时你的Text没有内边距，可能导致消息被Card边缘遮挡。

优化后的自定义Snackbar：

@Composable
fun Snackbar(snackbarHostState: SnackbarHostState) {
    SnackbarHost(
        hostState = snackbarHostState,
        snackbar = { snackbarData: SnackbarData ->
            Card(
                shape = RoundedCornerShape(10.dp),
                modifier = Modifier
                    .padding(20.dp)
                    .wrapContentSize(),
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
            ) {
                Text(
                    text = snackbarData.visuals.message,
                    fontSize = 30.sp,
                    modifier = Modifier.padding(16.dp)
                )
            }
            // 处理Snackbar的 dismiss 事件，确保生命周期正常
            LaunchedEffect(snackbarData) {
                snackbarData.dismissEvent.receive()
            }
        }
    )
}

3. 布局放置位置错误 #

SnackbarHost应该放在Scaffold的snackbarHost参数中，这样才能保证Snackbar正确覆盖在其他内容之上，避免布局错乱：

val snackbarHostState = remember { SnackbarHostState() }
val coroutineScope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { Snackbar(snackbarHostState) }
) { innerPadding ->
    Column(modifier = Modifier.padding(innerPadding)) {
        Button(onClick = {
            coroutineScope.launch {
                snackbarHostState.showSnackbar("Incorrect")
            }
        }) {
            Text("Show Snackbar")
        }
    }
}

另外，不建议单独封装LaunchSnackbar Composable，直接在点击等事件中通过协程调用showSnackbar，能更精准控制触发时机，减少重组问题。

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