使用 Scaffold 在 Material Design 3 中显示 Snackbar

Question

决定在我的新 Jetpack Compose 项目中尝试Material Design 3 。一切都很舒适，直到我碰壁时需要展示一个 Snackbar。

在MD2中，这非常简单，您可以在使用SnackbarHostState.showSnackbar()协程作用域内的函数完成的支架中显示小吃栏。我观察到您只需要从androidx.compose.material.rememberScaffoldState材质库导入即可。

import androidx.compose.material.rememberScaffoldState


@Composable
fun MyScreenInMaterial2() {
    val scaffoldState = rememberScaffoldState()
}

当我在MD3中尝试相同的操作时，该rememberScaffoldState()功能未得到解析。

对于那些深入了解 MD3 世界的人来说，如何在脚手架中显示 Snackbar？我已经检查了文档和在线资源，但没有找到解决方案。

Answer 1

这里有一个来自官方文档的示例。

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                // show snackbar as a suspend function
                scope.launch {
                    snackbarHostState.showSnackbar(
                        "Snackbar # ${++clickCount}"
                    )
                }
            }
        ) { Text("Show snackbar") }
    },
    content = { innerPadding ->
        Text(
            text = "Body content",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize()
        )
    }
)

Answer 2

听听达米安·佩特拉（Damian Petla）的回答。

如果你使用 aCoroutineScope那么你会收到一条警告说CoroutineCreationDuringComposition。

官方文档建议使用LaunchedEffect替代方法来避免这种副作用。

所以建议的代码如下所示：

val snackbarHostState = remember { SnackbarHostState() }

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                LaunchedEffect(snackbarHostState) {
                    snackbarHostState.showSnackbar(
                        "Snackbar # ${++clickCount}"
                    )
                }
            }
        ) { Text("Show snackbar") }
    },
    content = { innerPadding ->
        Text(
            text = "Body content",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize()
        )
    }
)