Le composant snackbar sert de notification brève qui s'affiche en bas de l'écran. Elle fournit des commentaires sur une opération ou une action sans interrompre l'expérience utilisateur. Les snackbars disparaissent après quelques secondes. L'utilisateur peut également les fermer en effectuant une action (appuyer sur un bouton, par exemple).
Voici les trois cas d'utilisation dans lesquels vous pourriez utiliser un snackbar:
- Confirmation de l'action:lorsqu'un utilisateur supprime un e-mail ou un message, un snackbar apparaît pour confirmer l'action et proposer une option "Annuler".
- État du réseau:lorsque l'application perd sa connexion Internet, un snackbar s'affiche pour indiquer qu'elle est désormais hors connexion.
- Envoi des données:lors de l'envoi d'un formulaire ou de la mise à jour des paramètres, un snackbar indique que la modification a bien été enregistrée.
Exemple de base
Pour implémenter un snackbar, vous devez d'abord créer SnackbarHost, qui inclut une propriété SnackbarHostState. SnackbarHostState donne accès à la fonction showSnackbar() que vous pouvez utiliser pour afficher votre snackbar.
Cette fonction de suspension nécessite un CoroutineScope, par exemple avec l'utilisation de rememberCoroutineScope. Elle peut être appelée en réponse à des événements d'interface utilisateur pour afficher un Snackbar dans 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
}
Snackbar avec action
Vous pouvez ajouter une action facultative et ajuster la durée de Snackbar.
La fonction snackbarHostState.showSnackbar() accepte des paramètres actionLabel et duration supplémentaires et renvoie 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
}
Vous pouvez fournir une Snackbar personnalisée avec le paramètre snackbarHost. Pour en savoir plus, consultez la documentation de référence de l'API SnackbarHost.