Creare una barra delle app superiore dinamica

Questa guida spiega come creare una barra delle app in alto dinamica in Compose che cambia le sue opzioni quando vengono selezionati elementi dall'elenco. Puoi modificare il titolo e le azioni della barra delle app in alto in base allo stato di selezione.

Implementa il comportamento dinamico della barra dell'app in alto

Questo codice definisce una funzione componibile per la barra delle app in alto che cambia in base alla selezione degli elementi:

@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(
                        painter = rememberVectorPainter(AppIcons.Share),
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}

Punti chiave sul codice

  • AppBarSelectionActions accetta un Set di indici degli elementi selezionati.
  • La topBarText cambia a seconda che tu selezioni o meno degli elementi.
    • Quando selezioni gli elementi, il testo che descrive il numero di elementi selezionati viene visualizzato in TopAppBar.
    • Se non selezioni alcun elemento, topBarText è "Elenco di elementi".
  • Il blocco actions definisce le azioni visualizzate nella barra delle app in alto. Se hasSelection è true, dopo il testo viene visualizzata un'icona di condivisione.
  • La funzione lambda onClick di IconButton gestisce l'azione di condivisione quando fai clic sull'icona.

Risultato

Una barra delle app superiore dinamica mostra il testo 3 elementi selezionati con un'icona di condivisione. Questo testo e l'icona vengono visualizzati solo quando sono selezionati degli elementi
Figura 1. Una barra delle app superiore dinamica con testo e un'icona di condivisione che vengono visualizzati solo quando vengono selezionati gli elementi.

Integra l'elenco selezionabile nella barra delle app superiore dinamica

Questo esempio mostra come aggiungere un elenco selezionabile a una barra dell'app in alto dinamica:

@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
                            }
                        )
                )
            }
        }
    }
}

Punti chiave sul codice

  • La barra superiore si aggiorna in base al numero di elementi dell'elenco selezionati.
  • selectedItems contiene l'insieme di indici degli elementi selezionati.
  • AppBarMultiSelectionExample utilizza un Scaffold per strutturare la schermata.
    • topBar = { AppBarSelectionActions(selectedItems) } imposta il componibile AppBarSelectionActions come barra dell'app in alto. AppBarSelectionActions riceve lo stato selectedItems.
  • LazyColumn mostra gli elementi in un elenco verticale, visualizzando solo gli elementi visibili sullo schermo.
  • ListItemSelectable rappresenta una voce di elenco selezionabile.
    • combinedClickable consente di gestire sia il clic sia il clic lungo per la selezione degli elementi. Un clic esegue un'azione, mentre un clic prolungato su un elemento attiva/disattiva lo stato di selezione.

Risultato

Una barra delle app in alto dinamica mostra il testo &quot;3 elementi selezionati&quot;, seguito da un'icona di condivisione. Sotto, un elenco mostra diversi elementi, con segni di spunta accanto ai tre selezionati
Figura 2. Un elenco integrato in una barra dell'app in alto dinamica con elementi specifici selezionati.

Risorse aggiuntive