快捷信息栏

信息提示控件组件充当一种简短的通知,显示在 屏幕底部。它可以提供有关某项操作或操作的反馈, 干扰用户体验。信息条会在几秒后消失。通过 用户也可以通过操作(例如点按按钮)将其关闭。

请考虑以下三个可能会使用信息提示控件的使用场景:

  • 操作确认:用户删除电子邮件或消息后, 系统会显示信息提示控件来确认操作并提供“撤消”提示选项。
  • 网络状态:当应用失去互联网连接时,信息条 会弹出一个窗口,说明现在处于离线状态。
  • 数据提交:成功提交表单或更新信息后 设置,则信息条会提示您更改已成功保存。

基本示例

如需实现信息提示控件,首先要创建 SnackbarHost,其中包含 SnackbarHostState 属性。SnackbarHostState 提供对 showSnackbar() 函数,可用于显示信息提示控件。

此挂起函数需要 CoroutineScope,例如使用 rememberCoroutineScope - 可以被调用以响应界面事件, 在 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
}

带有操作按钮的信息提示控件

您可以提供可选操作,并调整 Snackbar 的时长。snackbarHostState.showSnackbar() 函数可接受额外的 actionLabelduration 参数,并返回 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
}

您可以使用 snackbarHost 参数提供自定义 Snackbar。请参阅 如需了解详情,请参阅 SnackbarHost API 参考文档