Il componente barra di notifica serve come breve notifica visualizzata nella parte inferiore dello schermo. Fornisce feedback su un'operazione o un'azione senza interrompere l'esperienza utente. Le barre di appostamento scompaiono dopo alcuni secondi. L'utente può anche ignorarli con un'azione, ad esempio toccando un pulsante.
Considera questi tre casi d'uso in cui potresti utilizzare una snackbar:
- Conferma azione: dopo che un utente ha eliminato un'email o un messaggio, viene visualizzata una barra di notifica per confermare l'azione e offrire un'opzione "Annulla".
- Stato della rete: quando l'app perde la connessione a internet, viene visualizzata una barra di notifica che indica che è offline.
- Invio dei dati:dopo aver inviato un modulo o aggiornato le impostazioni, una barra di notifica indica che la modifica è stata salvata correttamente.
Esempio di base
Per implementare una snackbar, devi prima creare SnackbarHost
, che include una proprietà SnackbarHostState
. SnackbarHostState
fornisce l'accesso alla funzione
showSnackbar()
che puoi utilizzare per visualizzare la barra di notifica.
Questa funzione di sospensione richiede un CoroutineScope
, ad esempio con l'utilizzo di rememberCoroutineScope
, e può essere chiamata in risposta agli eventi dell'interfaccia utente per mostrare un Snackbar
in 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 con azione
Puoi fornire un'azione facoltativa e regolare la durata del Snackbar
.
La funzione snackbarHostState.showSnackbar()
accetta parametri actionLabel
e duration
aggiuntivi e restituisce 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 }
Puoi fornire un Snackbar
personalizzato con il parametro snackbarHost
. Per ulteriori informazioni, consulta la documentazione di riferimento dell'API SnackbarHost
.