Creare una barra delle app superiore dinamica

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

Implementare il comportamento dinamico della barra delle app superiore

Questo codice definisce una funzione componibile per la barra delle app superiore 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(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

Punti chiave del codice

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

Risultato

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

Integrare l'elenco selezionabile nella barra delle app superiore dinamica

Questo esempio mostra come aggiungere un elenco selezionabile a una barra delle app 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
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

Punti chiave del codice

  • La barra superiore si aggiorna in base al numero di elementi dell'elenco selezionati.
  • selectedItems contiene l'insieme degli indici degli elementi selezionati.
  • AppBarMultiSelectionExample utilizza una Scaffold per strutturare lo schermo.
    • topBar = { AppBarSelectionActions(selectedItems) } imposta il componente AppBarSelectionActions come barra delle app superiore. 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 la gestione sia dei clic che dei clic prolungati per la selezione degli elementi. Un clic esegue un'azione, mentre un clic prolungato su un elemento attiva/disattiva il relativo stato di selezione.

Risultato

Una barra delle app dinamica mostra il testo 3 elementi selezionati, seguito da un&#39;icona di condivisione. Di seguito, un elenco mostra diversi elementi, con i segni di spunta accanto ai tre selezionati
Figura 2. Un elenco integrato in una barra delle app superiore dinamica con elementi specifici selezionati.

Risorse aggiuntive