Criar uma barra de apps superior dinâmica

Este guia explica como criar uma barra de app superior dinâmica no Compose que muda as opções quando os itens são selecionados na lista. É possível modificar o título e as ações da barra de apps superior com base no estado de seleção.

Implementar o comportamento dinâmico da barra de apps na parte de cima

Esse código define uma função combinável para a barra de apps superior que muda com base na seleção de itens:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
    )
}
AppBar.kt

Pontos principais sobre o código

  • AppBarSelectionActions aceita um Set de índices de itens selecionados.
  • O topBarText muda dependendo se algum item está selecionado.
    • Quando os itens são selecionados, o texto que descreve o número de itens selecionados aparece no TopAppBar.
    • Se nenhum item for selecionado, o topBarText será "Lista de itens".
  • O bloco actions define as ações exibidas na barra de apps na parte de cima. Se hasSelection for verdadeiro, um ícone de compartilhamento vai aparecer após o texto.
  • A lambda onClick do IconButton processa a ação de compartilhamento quando o ícone é clicado.

Resultado

Uma barra de apps superior dinâmica mostra o texto &quot;3 itens selecionados&quot; com um ícone de compartilhamento. Esse texto e o ícone só aparecem quando os itens são selecionados.
Figura 1. Uma barra de apps superior dinâmica com texto e um ícone de compartilhamento que só aparece quando os itens são selecionados.

Integrar a lista selecionável à barra de apps superior dinâmica

Este exemplo demonstra como adicionar uma lista selecionável a uma barra de apps superior dinâmica:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

Pontos principais sobre o código

  • A barra superior é atualizada com base no número de itens da lista selecionados.
  • selectedItems contém o conjunto de índices de itens selecionados.
  • O AppBarMultiSelectionExample usa um Scaffold para estruturar a tela.
    • topBar = { AppBarSelectionActions(selectedItems) } define o combinável AppBarSelectionActions como a barra de apps na parte de cima. AppBarSelectionActions recebe o estado selectedItems.
  • LazyColumn mostra os itens em uma lista vertical, renderizando apenas os itens visíveis na tela.
  • ListItemSelectable representa um item de lista selecionável.
    • combinedClickable permite o tratamento de cliques e cliques longos para seleção de itens. Um clique executa uma ação, enquanto o clique longo em um item alterna o estado de seleção.

Resultado

Uma barra de apps superior dinâmica mostra o texto &quot;3 itens selecionados&quot;, seguido por um ícone de compartilhamento. Abaixo, uma lista mostra vários itens, com marcas de seleção ao lado dos três selecionados
Figura 2. Uma lista integrada a uma barra de app superior dinâmica com itens específicos selecionados.

Outros recursos