Przycisk podzielony na segmenty

Użyj przycisku segmentowego, aby umożliwić użytkownikom wybór z zestawu opcji wyświetlanych obok siebie. Istnieją 2 rodzaje przycisków segmentowych:

  • Przycisk pojedynczego wyboru: umożliwia użytkownikom wybranie jednej opcji.
  • Przycisk wielokrotnego wyboru: umożliwia użytkownikom wybór od 2 do 5 elementów. W przypadku bardziej złożonych wyborów lub więcej niż 5 elementów użyj elementów.
Wyświetli się komponent przycisku segmentowego. Pierwszy przycisk umożliwia wybór pojedynczy, a drugi – wielokrotny.
Rysunek 1. Przycisk pojedynczego wyboru (1) i przycisk wielokrotnego wyboru (2).

Powierzchnia interfejsu API

Aby utworzyć przyciski segmentowe, użyj układów SingleChoiceSegmentedButtonRow i MultiChoiceSegmentedButtonRow. Te układy prawidłowo określają pozycję i rozmiar SegmentedButton oraz mają te kluczowe parametry:

  • space: dostosowuje nakładanie się przycisków.
  • content: zawiera treść wiersza przycisków segmentowych, która zwykle jest sekwencją elementów SegmentedButton.

Tworzenie przycisku segmentowego z jednym wyborem

Ten przykład pokazuje, jak utworzyć przycisk segmentowy z jednym wyborem:

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

Najważniejsze informacje o kodzie

  • Inicjuje zmienną selectedIndex za pomocą funkcji remember i mutableIntStateOf, aby śledzić indeks wybranego przycisku.
  • Definiuje listę options reprezentujących etykiety przycisków.
  • SingleChoiceSegmentedButtonRow umożliwia wybranie tylko jednego przycisku.
  • Tworzy element SegmentedButton dla każdej opcji w pętli forEachIndexed:
    • shape określa kształt przycisku na podstawie jego indeksu i łącznej liczby opcji za pomocą SegmentedButtonDefaults.itemShape.
    • onClick aktualizuje selectedIndex indeksem klikniętego przycisku.
    • selected ustawia stan wyboru przycisku na podstawie wartości selectedIndex.
    • label wyświetla etykietę przycisku za pomocą komponentu Text.

Wynik

Wyświetlany jest komponent przycisku segmentowego z opcjami Dzień, Miesiąc i Tydzień. Obecnie wybrana jest opcja Dzień.
Rysunek 2. Przycisk jednokrotnego wyboru z wybraną 1 opcją.

Tworzenie przycisku segmentowego wielokrotnego wyboru

Ten przykład pokazuje, jak utworzyć przycisk segmentowy wielokrotnego wyboru z ikonami, który umożliwia użytkownikom wybieranie wielu opcji:

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

Najważniejsze informacje o kodzie

  • Kod inicjuje zmienną selectedOptions za pomocą remember i mutableStateListOf. Śledzi to stan wybranego przycisku.
  • Kod zawiera przyciski w MultiChoiceSegmentedButtonRow.
  • W pętli forEachIndexed kod tworzy SegmentedButton dla każdej opcji:
    • shape określa kształt przycisku na podstawie jego indeksu i łącznej liczby opcji.
    • checked ustawia stan zaznaczenia przycisku na podstawie odpowiedniej wartości w selectedOptions.
    • onCheckedChange przełącza stan zaznaczenia odpowiedniego elementu w selectedOptions po kliknięciu przycisku.
    • icon wyświetla ikonę na podstawie SegmentedButtonDefaults.Icon i stanu zaznaczenia przycisku.
    • label wyświetla ikonę odpowiadającą etykiecie, używając elementów kompozycyjnych Icon z odpowiednimi wektorami obrazów i opisami treści.

Wynik

Wyświetlany jest komponent przycisku segmentowego z opcjami „Pieszo”, „Rowerem” i „Samochodem”. Obecnie wybrane są opcje „Pieszo” i „Przejazd”.
Rysunek 3. Przycisk segmentowy wielokrotnego wyboru z wybranymi 2 opcjami.

Dodatkowe materiały