El componente de la barra de notificaciones funciona como una notificación breve que aparece en la parte inferior de la pantalla. Proporciona feedback sobre una operación o acción sin sin interrumpir la experiencia del usuario. Las barras de notificaciones desaparecen después de unos segundos. El el usuario también puede descartarlos con una acción, como presionar un botón.
Considera estos tres casos de uso en los que podrías usar una barra de notificaciones:
- Confirmación de acción: Después de que un usuario borra un correo electrónico o un mensaje, se produce la barra de notificaciones confirma la acción y ofrece la opción "Deshacer" de 12 a 1 con la nueva opción de compresión.
- Estado de la red: Cuando la app pierde la conexión a Internet, aparece la barra de notificaciones. aparecerá una ventana emergente para indicar que está sin conexión.
- Envío de datos: Después de enviar correctamente un formulario o actualizar , una barra de notificaciones indicará que el cambio se guardó correctamente.
Ejemplo básico
Para implementar una barra de notificaciones, primero debes crear SnackbarHost
, que incluye un elemento
SnackbarHostState
. SnackbarHostState
proporciona acceso a la
showSnackbar()
, que puedes usar para mostrar la barra de notificaciones.
Esta función de suspensión requiere un CoroutineScope
, como con el uso de
rememberCoroutineScope
: se lo puede llamar en respuesta a eventos de IU para
mostrar un Snackbar
en Scaffold
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 }
Barra de notificaciones con acción
Puedes proporcionar una acción opcional y ajustar la duración de Snackbar
.
La función snackbarHostState.showSnackbar()
acepta parámetros actionLabel
y duration
adicionales, y muestra un 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 }
Puedes proporcionar una Snackbar
personalizada con el parámetro snackbarHost
. Consulta la
Documentos de referencia de la API de SnackbarHost
para obtener más información.