Criar uma barra de apps superior dinâmica

Este guia explica como criar uma barra de apps superior dinâmica no 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 da parte de cima com base no estado de seleção.

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

Este código define uma função combinável para a barra de apps 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 na TopAppBar.
  • Se você não selecionar nenhum item, o topBarText será "Lista de itens".
• O bloco actions define as ações mostradas na barra de apps na parte de cima. Se hasSelection for verdadeiro, um ícone de compartilhamento vai aparecer depois do texto.
• A lambda onClick do IconButton processa a ação de compartilhamento quando você clica no ícone.

Resultado

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

Integrar a 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 cima é atualizada com base no número de itens da lista que você seleciona.
• selectedItems contém o conjunto de índices de itens selecionados.
• O AppBarMultiSelectionExample usa um Scaffold para estruturar a tela.
  • topBar = { AppBarSelectionActions(selectedItems) } define o elemento combinável AppBarSelectionActions como a barra de apps 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.
  • O combinedClickable permite o processamento de cliques e cliques longos para seleção de itens. Um clique realiza uma ação, enquanto um clique longo em um item alterna o estado de seleção dele.

Resultado

Figura 2. Uma lista integrada a uma barra de apps dinâmica na parte de cima da tela com itens específicos selecionados.

Outros recursos

• TopAppBar
• LazyColumn
• Scaffold