信息提示控件组件充当一种简短的通知,显示在 屏幕底部。它可以提供有关某项操作或操作的反馈, 干扰用户体验。信息条会在几秒后消失。通过 用户也可以通过操作(例如点按按钮)将其关闭。
请考虑以下三个可能会使用信息提示控件的使用场景:
- 操作确认:用户删除电子邮件或消息后, 系统会显示信息提示控件来确认操作并提供“撤消”提示选项。
- 网络状态:当应用失去互联网连接时,信息条 会弹出一个窗口,说明现在处于离线状态。
- 数据提交:成功提交表单或更新信息后 设置,则信息条会提示您更改已成功保存。
基本示例
如需实现信息提示控件,首先要创建 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()
函数可接受额外的 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 }
您可以使用 snackbarHost
参数提供自定义 Snackbar
。请参阅
如需了解详情,请参阅 SnackbarHost
API 参考文档。