Snackbar

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

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

  • 操作确认：用户删除电子邮件或消息后，会显示Snackbar以确认操作并提供“撤销”选项。
  • 网络状态：当应用程序失去互联网连接时，会弹出一个Snackbar，指出它现在已离线。
  • 数据提交：成功提交表单或更新设置后，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参考文档。