Tworzenie dynamicznego górnego paska aplikacji

Z tego przewodnika dowiesz się, jak utworzyć w Compose dynamiczny górny pasek aplikacji, który zmienia opcje po wybraniu elementów z listy. Możesz modyfikować tytuł i działania na górnym pasku aplikacji w zależności od stanu zaznaczenia.

Wdrażanie dynamicznego działania górnego paska aplikacji

Ten kod definiuje funkcję kompozycyjną paska aplikacji u góry, która zmienia się w zależności od wyboru elementu:

@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

Najważniejsze informacje o kodzie

  • AppBarSelectionActions akceptuje Set indeksów wybranych elementów.
  • Symbol topBarText zmienia się w zależności od tego, czy wybierzesz jakieś elementy.
    • Gdy wybierzesz elementy, w TopAppBar pojawi się tekst opisujący liczbę wybranych elementów.
    • Jeśli nie wybierzesz żadnych elementów, topBarText będzie mieć wartość „Lista elementów”.
  • Blok actions określa działania wyświetlane na górnym pasku aplikacji. Jeśli hasSelection ma wartość true, po tekście pojawi się ikona udostępniania.
  • Funkcja onClick lambda w IconButton obsługuje działanie udostępniania, gdy klikniesz ikonę.

Wynik

Dynamiczny górny pasek aplikacji wyświetla tekst Wybrano 3 elementy z ikoną udostępniania. Ten tekst i ikona są widoczne tylko wtedy, gdy wybrane są elementy.
Rysunek 1. Dynamiczny górny pasek aplikacji z tekstem i ikoną udostępniania, które pojawiają się tylko wtedy, gdy wybrane są elementy.

Integracja listy z możliwością wyboru z dynamicznym górnym paskiem aplikacji

Ten przykład pokazuje, jak dodać listę z możliwością wyboru do dynamicznego górnego paska aplikacji:

@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

Najważniejsze informacje o kodzie

  • Pasek u góry jest aktualizowany w zależności od liczby wybranych elementów listy.
  • selectedItems zawiera zestaw indeksów wybranych elementów.
  • AppBarMultiSelectionExample używa Scaffold do strukturyzowania ekranu.
    • topBar = { AppBarSelectionActions(selectedItems) } ustawia AppBarSelectionActions jako górny pasek aplikacji. AppBarSelectionActions otrzymuje stan selectedItems.
  • LazyColumn wyświetla elementy w postaci listy pionowej, renderując tylko te elementy, które są widoczne na ekranie.
  • ListItemSelectable oznacza element listy, który można wybrać.
    • combinedClickable umożliwia obsługę kliknięć i długich kliknięć w przypadku wyboru elementu. Kliknięcie powoduje wykonanie działania, a długie kliknięcie elementu przełącza jego stan zaznaczenia.

Wynik

Dynamiczny górny pasek aplikacji wyświetla tekst Wybrano 3 elementy, a następnie ikonę udostępniania. Poniżej znajduje się lista kilku elementów z zaznaczonymi 3 z nich.
Rysunek 2. Lista zintegrowana z dynamicznym paskiem aplikacji u góry z wybranymi elementami.

Dodatkowe materiały