Barre de notification

Le composant Snackbar sert de brève notification qui s'affiche en bas de l'écran. Il fournit des informations 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 ignorer en effectuant une action, comme appuyer sur un bouton.

Voici trois cas d'utilisation dans lesquels vous pouvez utiliser une snackbar :

• Confirmation de l'action : lorsqu'un utilisateur supprime un e-mail ou un message, un message s'affiche pour confirmer l'action et proposer une option "Annuler".
• État du réseau : lorsqu'elle perd sa connexion Internet, l'application affiche une snackbar pour indiquer qu'elle est désormais hors connexion.
• Envoi de données : lorsqu'un formulaire est envoyé ou que des paramètres sont mis à jour, une snackbar indique que la modification a bien été enregistrée.

Exemple de base

Pour implémenter une snackbar, vous devez d'abord créer SnackbarHost, qui inclut une propriété SnackbarHostState. SnackbarHostState fournit un accès à la fonction showSnackbar() que vous pouvez utiliser pour afficher votre snackbar.

Cette fonction de suspension nécessite de définir son CoroutineScope (par exemple, via rememberCoroutineScope) et peut être appelée en réponse à des événements d'interface utilisateur pour afficher une Snackbar dans le 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
}
MaterialLayoutSnippets.kt

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
}
MaterialLayoutSnippets.kt

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.

Points essentiels

• actionLabel = "Action" : définit le texte du bouton d'action.
• withDismissAction = true : fournit une croix dans la snackbar. Appuyez dessus pour fermer la snackbar.
• duration = SnackbarDuration.Indefinite : maintient la barre d'informations affichée jusqu'à ce que l'utilisateur ou le programme la ferme.
• SnackbarResult.ActionPerformed : indique que l'utilisateur a cliqué sur le bouton d'action du snackbar.
• SnackbarResult.Dismissed : indique que l'utilisateur a fermé la snackbar sans cliquer sur le bouton d'action.