Il componente snackbar funge da breve notifica che viene visualizzata nella parte inferiore dello schermo. Fornisce feedback su un'operazione o un'azione senza interrompere l'esperienza utente. Gli snackbar scompaiono dopo alcuni secondi. L'utente può anche ignorarli con un'azione, ad esempio toccare un pulsante.
Considera questi tre casi d'uso in cui potresti utilizzare una snackbar:
- Conferma dell'azione: dopo che un utente elimina un'email o un messaggio, viene visualizzata una snackbar per confermare l'azione e offrire un'opzione "Annulla".
- Stato della rete: quando l'app perde la connessione a internet, viene visualizzata una snackbar che indica che è offline.
- Invio dei dati: dopo aver inviato un modulo o aggiornato le impostazioni, una snackbar segnala che la modifica è stata salvata.
Esempio di base
Per implementare una snackbar, devi prima creare SnackbarHost
, che include una proprietà SnackbarHostState
. SnackbarHostState
dà accesso alla funzione showSnackbar()
che puoi utilizzare per visualizzare la snackbar.
Questa funzione di sospensione richiede un CoroutineScope
, ad esempio con
rememberCoroutineScope
, e può essere chiamata in risposta a eventi dell'interfaccia utente per
mostrare un elemento Snackbar
all'interno di 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 modificare la durata dell'evento "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 valore Snackbar
personalizzato con il parametro snackbarHost
. Per ulteriori informazioni, consulta la documentazione di riferimento dell'API SnackbarHost
.