O componente snackbar serve como uma breve notificação que aparece na parte de baixo da tela. Ele fornece feedback sobre uma operação ou ação sem interromper a experiência do usuário. As snackbars desaparecem após alguns segundos. O usuário também pode dispensá-los com uma ação, como tocar em um botão.
Considere estes três casos de uso em que é possível usar um snackbar:
- Confirmação de ação:depois que um usuário exclui um e-mail ou uma mensagem, uma snackbar aparece para confirmar a ação e oferecer a opção "Desfazer".
- Status da rede:quando o app perde a conexão de Internet, uma snackbar é exibida para informar que está off-line.
- Envio de dados:após o envio de um formulário ou a atualização das configurações, uma snackbar mostra que a mudança foi salva.
Exemplo básico
Para implementar uma snackbar, primeiro crie SnackbarHost
, que inclui uma
propriedade SnackbarHostState
. SnackbarHostState
fornece acesso à função
showSnackbar()
, que pode ser usada para mostrar a snackbar.
Essa função de suspensão requer um CoroutineScope
, como ao usar
rememberCoroutineScope
, e pode ser chamada em resposta a eventos da interface para
mostrar uma Snackbar
em 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 }
Lanchonete cheia de ação
Você pode fornecer uma ação opcional e ajustar a duração da Snackbar
.
A função snackbarHostState.showSnackbar()
aceita outros parâmetros actionLabel
e duration
e retorna um 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 }
É possível fornecer uma Snackbar
personalizada com o parâmetro snackbarHost
. Para mais informações, consulte os documentos de referência da API SnackbarHost
.