Dynamische obere App-Leiste erstellen

In dieser Anleitung wird erklärt, wie Sie in Compose eine dynamische obere App-Leiste 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.

Verhalten der dynamischen oberen App-Leiste implementieren

Dieser Code definiert eine zusammensetzbare Funktion für die obere App-Leiste, die sich je nach Elementauswahl ä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"
                    )
                }
            }
        },
        modifier = modifier
    )
}
AppBar.kt

Wichtige Punkte zum Code

  • AppBarSelectionActions akzeptiert ein Set ausgewählter Elementindizes.
  • Der topBarText ändert sich je nachdem, ob Sie Elemente auswählen.
    • Wenn Sie Elemente auswählen, wird Text mit der Anzahl der ausgewählten Elemente in der TopAppBarangezeigt.
    • Wenn Sie keine Elemente auswählen, lautet der topBarText „List of items“ (Liste der Elemente).
  • Der Block actions definiert die Aktionen, die in der oberen App-Leiste angezeigt werden. Wenn hasSelection „true“ ist, wird nach dem Text ein Freigabesymbol angezeigt.
  • Das onClick Lambda von IconButton verarbeitet die Freigabeaktion, wenn Sie auf das Symbol klicken.

Ergebnis

In einer dynamischen oberen App-Leiste wird der Text „3 Elemente ausgewählt“ mit einem Freigabesymbol angezeigt. Dieser Text und das Symbol werden nur angezeigt, wenn Elemente ausgewählt sind.
Abbildung 1 Eine dynamische obere App-Leiste mit Text und einem Freigabesymbol, die nur angezeigt werden, wenn Elemente ausgewählt sind.

Auswählbare Liste in 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(
        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

Wichtige Punkte zum Code

  • Die obere Leiste wird je nach Anzahl der ausgewählten Listenelemente aktualisiert.
  • selectedItems enthält die Menge der ausgewählten Elementindizes.
  • AppBarMultiSelectionExample verwendet ein Scaffold, um den Bildschirm zu strukturieren.
    • topBar = { AppBarSelectionActions(selectedItems) } legt die AppBarSelectionActions zusammensetzbare Funktion als obere App-Leiste fest. AppBarSelectionActions empfängt den Status selectedItems.
  • LazyColumn zeigt die Elemente in einer vertikalen Liste an und rendert nur die Elemente, die auf dem Bildschirm sichtbar sind.
  • ListItemSelectable stellt ein auswählbares Listenelement dar.
    • combinedClickable ermöglicht sowohl das Klicken als auch das lange Klicken zur Auswahl von Elementen. Durch Klicken wird eine Aktion ausgeführt, während durch langes Klicken auf ein Element der Auswahlstatus umgeschaltet wird.

Ergebnis

In einer dynamischen oberen App-Leiste wird der Text „3 Elemente ausgewählt“ gefolgt von einem Freigabesymbol angezeigt. Unten ist eine Liste mit mehreren Elementen zu sehen. Neben den drei ausgewählten Elementen sind Häkchen zu sehen.
Abbildung 2 Eine Liste, die in eine dynamische obere App-Leiste eingebunden ist, wobei bestimmte Elemente ausgewählt sind.

Zusätzliche Ressourcen