Dynamische obere App-Leiste erstellen

In diesem Leitfaden wird erläutert, 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.

Dynamisches Verhalten der 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"
                    )
                }
            }
        },
     er = modifier
    )
}AppBar.kt

Wichtige Punkte zum Code

  • AppBarSelectionActions akzeptiert eine Set mit ausgewählten Elementindexen.
  • Die topBarText ändert sich, je nachdem, ob Sie Elemente auswählen.
    • Wenn Sie Elemente auswählen, wird im TopAppBar ein Text mit der Anzahl der ausgewählten Elemente angezeigt.
    • Wenn Sie keine Elemente auswählen, lautet der topBarText „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.
  • 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
                            }
                        )
                )
            }
        }
    }
}

Wichtige Punkte zum Code

  • Die obere Leiste wird je nach Anzahl der ausgewählten Listenelemente aktualisiert.
  • selectedItems enthält die Gruppe der ausgewählten Elementindexe.
  • AppBarMultiSelectionExample verwendet ein Scaffold, um den Bildschirm zu strukturieren.
    • Mit topBar = { AppBarSelectionActions(selectedItems) } wird die komponierbare Funktion AppBarSelectionActions als obere App-Leiste festgelegt. AppBarSelectionActions erhält den Status selectedItems.
  • LazyColumn zeigt die Elemente in einer vertikalen Liste an und rendert nur die Elemente, die auf dem Bildschirm sichtbar sind.
  • ListItemSelectable steht für ein auswählbares Listenelement.
    • combinedClickable ermöglicht sowohl die Verarbeitung von Klicks als auch von langen Klicks für die Elementauswahl. 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“ angezeigt, gefolgt von einem Freigabesymbol. Darunter befindet sich eine Liste mit mehreren Elementen, wobei neben den drei ausgewählten Elementen Häkchen zu sehen sind.
Abbildung 2: Eine Liste, die in eine dynamische obere App-Leiste integriert ist, wobei bestimmte Elemente ausgewählt sind.

Zusätzliche Ressourcen