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 snackbar popup per indicare che ora è offline.
  • Invio dei dati:dopo aver inviato o aggiornato un modulo. delle impostazioni, una snackbar segnala 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 a Funzione showSnackbar() che puoi utilizzare per visualizzare la snackbar.

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 modificare la durata dell'evento "Snackbar". La funzione snackbarHostState.showSnackbar() accetta actionLabel aggiuntivi e duration 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.