Dynamische obere App-Leiste erstellen

In dieser Anleitung wird beschrieben, 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 basierend auf dem Auswahlstatus ändern.

Dynamisches Verhalten der oberen App-Leiste implementieren

Dieser Code definiert eine zusammensetzbare Funktion für die obere App-Leiste, die sich je nach Auswahl des Elements ä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 von ausgewählten Elementindexen.
  • Das topBarText ändert sich je nachdem, ob Sie Elemente auswählen.
    • Wenn Sie Elemente auswählen, wird im TopAppBar Text mit der Anzahl der ausgewählten Elemente angezeigt.
    • Wenn Sie keine Elemente auswählen, ist topBarText „Liste der Elemente“.
  • Mit dem Block actions werden die Aktionen definiert, die in der oberen App-Leiste angezeigt werden. Wenn hasSelection „true“ ist, wird nach dem Text ein Freigabesymbol angezeigt.
  • Die onClick-Lambda-Funktion 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 entsprechend der Anzahl der ausgewählten Listenelemente aktualisiert.
  • selectedItems enthält die Gruppe der ausgewählten Elementindexe.
  • AppBarMultiSelectionExample verwendet eine Scaffold, um den Bildschirm zu strukturieren.
    • Mit topBar = { AppBarSelectionActions(selectedItems) } wird die AppBarSelectionActions-Composable als obere App-Leiste festgelegt. AppBarSelectionActions erhält den Status selectedItems.
  • LazyColumn zeigt die Elemente in einer vertikalen Liste an, wobei nur die Elemente gerendert werden, die auf dem Bildschirm sichtbar sind.
  • ListItemSelectable steht für ein auswählbares Listenelement.
    • Mit combinedClickable können sowohl Klicks als auch lange Klicks für die Auswahl von Elementen verarbeitet werden. Bei einem Klick 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 integriert ist, wobei bestimmte Elemente ausgewählt sind.

Zusätzliche Ressourcen