Criar uma barra de apps superior dinâmica

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

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

Este código define uma função combinável para a barra de apps na parte de cima 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"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

Pontos principais sobre o código

  • AppBarSelectionActions aceita um Set de índices de itens selecionados.
  • O topBarText muda dependendo se você seleciona algum item.
    • Quando você seleciona itens, um texto que descreve o número de itens selecionados aparece no TopAppBar.
    • Se você não selecionar nenhum item, o topBarText será "List of items".
  • O bloco actions define as ações que você mostra na barra de apps na parte de cima. Se hasSelection for verdadeiro, um ícone de compartilhamento vai aparecer após o texto.
  • O onClick lambda do IconButton processa a ação de compartilhamento quando você clica no ícone.

Resultado

Uma barra de apps dinâmica na parte de cima 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 dinâmica na parte de cima com texto e um ícone de compartilhamento que só aparecem quando os itens são selecionados.

Integrar uma lista selecionável à barra de apps dinâmica na parte de cima

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

@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(
        modifier = modifier,
        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 de apps na parte de cima é atualizada com base no número de itens da lista selecionados.
  • selectedItems contém o conjunto de índices de itens selecionados.
  • AppBarMultiSelectionExample usa um Scaffold para estruturar a tela.
    • topBar = { AppBarSelectionActions(selectedItems) } define o AppBarSelectionActions combinável 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 processamento de cliques e cliques longos para a seleção de itens. Um clique executa uma ação, enquanto um 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 apps dinâmica na parte de cima com itens específicos selecionados.

Outros recursos