Dynamische obere App-Leiste erstellen

In dieser Anleitung wird beschrieben, wie Sie in Google Docs in der oberen App-Leiste eine dynamische 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

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 Indexen ausgewählter Elemente.
• Das Symbol topBarText ändert sich, je nachdem, ob Sie Elemente ausgewählt haben.
  • Wenn Sie Elemente auswählen, wird in TopAppBar ein Text angezeigt, der die Anzahl der ausgewählten Elemente beschreibt.
  • Wenn Sie keine Elemente auswählen, lautet der topBarText „Liste der Elemente“.
• Mit dem Block actions definieren Sie die Aktionen, 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 du auf das Symbol klickst.

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 App-Leiste oben 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 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.

Zusätzliche Ressourcen

• TopAppBar
• LazyColumn
• Scaffold