Creare una barra delle app superiore dinamica

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

Implementare il comportamento dinamico della barra dell'app in alto

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

Punti chiave sul codice

  • AppBarSelectionActions accetta un Set di indici degli elementi selezionati.
  • 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 che vengono visualizzate nella barra dell'app in alto. Se hasSelection è true, dopo il testo viene visualizzata un'icona di condivisione.
  • La lambda onClick di IconButton gestisce l'azione di condivisione quando fai clic sull'icona.

Risultato

Una barra delle app dinamica in alto 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 dell'app in alto dinamica con testo e un'icona di condivisione che vengono visualizzati solo quando gli elementi sono selezionati.

Integrare l'elenco selezionabile nella barra dell'app in alto 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
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

Punti chiave sul codice

  • La barra in alto viene aggiornata in base al numero di elementi dell'elenco selezionati.
  • selectedItems contiene il set di indici degli elementi selezionati.
  • AppBarMultiSelectionExample utilizza un Scaffold per strutturare la schermata.
    • topBar = { AppBarSelectionActions(selectedItems) } imposta il AppBarSelectionActions componibile come barra dell'app in alto. AppBarSelectionActions riceve lo stato selectedItems.
  • LazyColumn visualizza gli elementi in un elenco verticale, eseguendo il rendering solo degli elementi visibili sullo schermo.
  • ListItemSelectable rappresenta un elemento dell'elenco selezionabile.
    • combinedClickable consente la gestione sia dei clic sia dei clic prolungati per la selezione degli elementi. Un clic esegue un'azione, mentre un clic prolungato su un elemento attiva o 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 dell'app in alto dinamica con elementi specifici selezionati.

Risorse aggiuntive