Snackbar

Il componente snackbar è una 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 qualche secondo. L'utente può anche chiuderli con un'azione, ad esempio toccando un pulsante.

Considera questi tre casi d'uso in cui potresti utilizzare una snackbar:

• Conferma dell'azione: dopo che un utente ha eliminato un'email o un messaggio, viene visualizzato uno snackbar per confermare l'azione e offrire l'opzione "Annulla".
• Stato della rete: quando l'app perde la connessione a internet, appare una snackbar che indica che ora è offline.
• Invio dei dati: dopo l'invio di un modulo o l'aggiornamento delle 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 fornisce l'accesso alla funzione showSnackbar() che puoi utilizzare per visualizzare la tua snackbar.

Questa funzione di sospensione richiede un CoroutineScope come l'utilizzo di rememberCoroutineScope e può essere chiamata in risposta agli eventi dell'interfaccia utente per mostrare una 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
}
MaterialLayoutSnippets.kt

Snackbar con azione

Puoi fornire un'azione facoltativa e regolare la durata di Snackbar. La funzione snackbarHostState.showSnackbar() accetta parametri actionLabel e duration aggiuntivi e restituisce un valore 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

Puoi fornire un elemento Snackbar personalizzato con il parametro snackbarHost. Per ulteriori informazioni, consulta la documentazione di riferimento dell'API SnackbarHost.