Snackbar

Snackbar 组件是屏幕底部显示的简短通知。它提供有关操作或行为的反馈，而不会中断用户体验。Snackbar 会在几秒钟后消失。用户也可以通过点按按钮等操作来将其关闭。

考虑以下三种您可能使用 snackbar 的用例

  • 操作确认： 用户删除电子邮件或消息后，会出现一个 snackbar 以确认操作并提供“撤消”选项。
  • 网络状态： 当应用失去互联网连接时，会弹出一个 snackbar 提示其已离线。
  • 数据提交： 成功提交表单或更新设置后，snackbar 会提示更改已成功保存。
Examples of snackbar UI components.
图 1. Snackbar 示例。

基本示例

要实现 snackbar，您首先创建 SnackbarHost，其中包含一个 SnackbarHostState 属性。SnackbarHostState 提供了对 showSnackbar() 函数的访问，您可以使用该函数显示您的 snackbar。

此挂起函数需要一个 CoroutineScope（例如使用 rememberCoroutineScope），并且可以响应 UI 事件调用以在 Scaffold 中显示 Snackbar。

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}
MaterialLayoutSnippets.kt

带操作的 Snackbar

您可以提供一个可选操作并调整 Snackbar 的持续时间。snackbarHostState.showSnackbar() 函数接受额外的 actionLabel 和 duration 参数，并返回一个 SnackbarResult。

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    val result = snackbarHostState
                        .showSnackbar(
                            message = "Snackbar",
                            actionLabel = "Action",
                            // Defaults to SnackbarDuration.Short
                            duration = SnackbarDuration.Indefinite
                        )
                    when (result) {
                        SnackbarResult.ActionPerformed -> {
                            /* Handle snackbar action performed */
                        }
                        SnackbarResult.Dismissed -> {
                            /* Handle snackbar dismissed */
                        }
                    }
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}
MaterialLayoutSnippets.kt

您可以使用 snackbarHost 参数提供自定义的 Snackbar。有关详情，请参阅 SnackbarHost API 参考文档。

要点

  • actionLabel = "Action"：设置操作按钮文本。
  • withDismissAction = true：在 snackbar 中提供一个叉号。点按它可关闭 snackbar。
  • duration = SnackbarDuration.Indefinite：使 snackbar 一直显示，直到用户或程序将其关闭。
  • SnackbarResult.ActionPerformed：表示用户点击了 snackbar 的操作按钮。
  • SnackbarResult.Dismissed：表示用户未点击操作按钮就关闭了 snackbar。