Snackbar

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 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 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 barra di notifica, crea prima 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
}
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 Snackbar personalizzato con il parametro snackbarHost. Per ulteriori informazioni, consulta la documentazione di riferimento dell'API SnackbarHost.