Creare una barra delle app superiore dinamica

Questa guida spiega come creare una barra delle app superiore dinamica in Scrivi che modifica le 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 composable 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"
                    )
                }
            }
        },
    )
}
AppBar.kt

Punti chiave del codice

  • AppBarSelectionActions accetta un Set di indici di elementi selezionati.
  • Il simbolo topBarText cambia a seconda che siano selezionati elementi.
    • Quando gli elementi sono selezionati, nel TopAppBar viene visualizzato il testo che descrive il numero di elementi selezionati.
    • Se non sono selezionati elementi, 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 lambda onClick di IconButton gestisce l'azione di condivisione quando viene fatto clic sull'icona.

Risultato

Una barra delle app superiore 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 gli elementi
Figura 1. Una barra delle app superiore dinamica con testo e un'icona di condivisione che viene visualizzata 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 superiore 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(
        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 in alto si aggiorna in base al numero di elementi dell'elenco selezionati.
  • selectedItems contiene l'insieme degli indici degli elementi selezionati.
  • AppBarMultiSelectionExample utilizza un Scaffold per strutturare lo schermo.
    • topBar = { AppBarSelectionActions(selectedItems) } imposta il composable AppBarSelectionActions come barra delle app superiore. AppBarSelectionActions riceve lo stato selectedItems.
  • LazyColumn mostra gli elementi in un elenco verticale, visualizzando solo quelli visibili sullo schermo.
  • ListItemSelectable rappresenta un elemento dell'elenco selezionabile.
    • combinedClickable consente di gestire sia i clic sia i 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 superiore dinamica mostra il testo 3 elementi selezionati, seguito da un&#39;icona di condivisione. Sotto, 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