Barre de notification

Le composant "snackbar" est une brève notification qui s'affiche au niveau en bas de l'écran. Il fournit des commentaires sur une opération ou une action sans interrompre l’expérience utilisateur. Les snackbars disparaissent au bout de quelques secondes. La l'utilisateur peut également les ignorer en effectuant une action, par exemple en appuyant sur un bouton.

Voici 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, snackbar s'affiche pour confirmer l'action et proposer un « Annuler » .
• État du réseau:lorsque l'application perd sa connexion Internet, un snackbar s'affiche. s'affiche pour indiquer qu'il est hors connexion.
• Envoi de données:après l'envoi d'un formulaire ou la mise à jour , un snackbar note 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 un Propriété SnackbarHostState. SnackbarHostState permet d'accéder aux showSnackbar() que vous pouvez utiliser pour afficher votre snackbar.

Cette fonction de suspension nécessite un CoroutineScope, comme lors de l'utilisation rememberCoroutineScope, et peut être appelé 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
}
MaterialLayoutSnippets.kt

Snackbar et 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. Consultez le Pour en savoir plus, consultez la documentation de référence de l'API SnackbarHost.