Snackbar

Il componente snackbar funge da breve notifica che viene visualizzata nella nella parte inferiore dello schermo. Fornisce feedback su un'operazione o un'azione senza interrompendo l'esperienza utente. Gli snackbar scompaiono dopo alcuni secondi. La 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 viene visualizzata la snackbar per confermare l'azione e proporre un "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 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 rememberCoroutineScope, che può essere richiamata in risposta agli eventi dell'interfaccia utente per mostrano una 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
}
MaterialLayoutSnippets.kt

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

Puoi fornire un valore Snackbar personalizzato con il parametro snackbarHost. Consulta le Per ulteriori informazioni, documenti di riferimento dell'API SnackbarHost.