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.
• Das onClick-Lambda von 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 Indexe der ausgewählten Elemente.
• AppBarMultiSelectionExample verwendet ein Scaffold, um den Bildschirm zu strukturieren.
  • topBar = { AppBarSelectionActions(selectedItems) } legt das AppBarSelectionActions-Element als oberste App-Leiste fest. AppBarSelectionActions empfängt 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