Dynamische obere App-Leiste erstellen

In dieser Anleitung wird beschrieben, wie Sie in Compose eine dynamische App-Leiste oben erstellen, deren Optionen sich ändern, wenn Elemente aus der Liste ausgewählt werden. Sie können den Titel und die Aktionen der oberen App-Leiste je nach Auswahlstatus ändern.

Dynamisches Verhalten der oberen App-Leiste implementieren

In diesem Code wird eine zusammensetzbare Funktion für die obere App-Leiste definiert, die sich je nach Artikelauswahl ändert:

@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

Wichtige Punkte zum Code

• AppBarSelectionActions akzeptiert eine Set von ausgewählten Artikelindexen.
• Das Symbol topBarText ändert sich je nachdem, ob Elemente ausgewählt sind.
  • Wenn Elemente ausgewählt sind, wird in TopAppBar ein Text angezeigt, der die Anzahl der ausgewählten Elemente beschreibt.
  • Wenn keine Elemente ausgewählt sind, steht unter topBarText „Liste der Elemente“.
• Mit dem Block actions werden die Aktionen definiert, die in der oberen App-Leiste angezeigt werden. Wenn hasSelection auf „wahr“ gesetzt ist, wird nach dem Text ein Freigabesymbol angezeigt.
• Die onClick-Lambda-Funktion der IconButton verarbeitet die Freigabeaktion, wenn auf das Symbol geklickt wird.

Ergebnis

Abbildung 1: Eine dynamische App-Leiste oben mit Text und einem Freigabesymbol, die nur angezeigt werden, wenn Elemente ausgewählt sind.

Auswählbare Liste in die dynamische obere App-Leiste einbinden

In diesem Beispiel wird gezeigt, wie Sie einer dynamischen oberen App-Leiste eine auswählbare Liste hinzufügen:

@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

Wichtige Punkte zum Code

• Die obere Leiste wird entsprechend der Anzahl der ausgewählten Listenelemente aktualisiert.
• selectedItems enthält die ausgewählten Artikelindizes.
• AppBarMultiSelectionExample verwendet ein Scaffold, um den Bildschirm zu strukturieren.
  • topBar = { AppBarSelectionActions(selectedItems) } legt das AppBarSelectionActions-Element als obere App-Leiste fest. AppBarSelectionActions erhält den Status selectedItems.
• Mit LazyColumn werden die Elemente in einer vertikalen Liste angezeigt. Auf dem Bildschirm sind nur die Elemente zu sehen, die auf dem Bildschirm sichtbar sind.
• ListItemSelectable steht für ein auswählbares Listenelement.
  • Mit combinedClickable können Sie sowohl durch Klicken als auch durch langes Drücken Elemente auswählen. Ein Klick führt zu einer Aktion, während ein Gedrückthalten eines Elements den Auswahlstatus umschaltet.

Ergebnis

Abbildung 2: Eine Liste, die in eine dynamische App-Leiste oben integriert ist und bestimmte Elemente enthält.

Weitere Informationen

• TopAppBar
• LazyColumn
• Scaffold