Przycisk podzielony na segmenty

Użyj przycisku podzielonego, aby umożliwić użytkownikom wybór spośród zestawu opcji umieszczonych obok siebie. Istnieją 2 rodzaje przycisków segmentowanych:

  • Przycisk wyboru pojedynczego: pozwala użytkownikom wybrać jedną opcję.
  • Przycisk wyboru wielu elementów: umożliwia użytkownikom wybranie od 2 do 5 elementów. W przypadku bardziej złożonych opcji lub większej liczby elementów użyj elementów.
Wyświetla się podzielony na segmenty komponent przycisku. Pierwszy przycisk umożliwia wybór pojedynczego elementu, a drugi – wielokrotny wybór.
Rysunek 1. Przycisk pojedynczego wyboru (1) i przycisk wielokrotnego wyboru (2).

Interfejs API

Aby utworzyć przyciski podzielone na segmenty, użyj układów SingleChoiceSegmentedButtonRow i MultiChoiceSegmentedButtonRow. Te układy zapewniają prawidłowe rozmieszczenie i rozmiar SegmentedButton oraz mają te kluczowe parametry:

  • space: dostosowuje nakładanie się przycisków.
  • content: zawiera zawartość wiersza przycisku podzielonego na segmenty, która jest zwykle sekwencją elementów SegmentedButton.

Tworzenie przycisku segmentowanego z jednym polem wyboru

Ten przykład pokazuje, jak utworzyć przycisk segmentowany 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

  • Inicjowanie zmiennej selectedIndex za pomocą zmiennych remember i mutableIntStateOf w celu śledzenia wybranego indeksu przycisku.
  • Określa listę options reprezentujących etykiety przycisków.
  • SingleChoiceSegmentedButtonRow gwarantuje, że można wybrać tylko 1 przycisk.
  • W pętli forEachIndexed tworzy SegmentedButton dla każdej opcji:
    • shape określa kształt przycisku na podstawie jego indeksu i łącznej liczby opcji za pomocą SegmentedButtonDefaults.itemShape.
    • onClick aktualizuje selectedIndex za pomocą indeksu klikniętego przycisku.
    • selected ustawia stan wyboru przycisku na podstawie selectedIndex.
    • label wyświetla etykietę przycisku za pomocą elementu kompozycyjnego Text.

Wynik

Wyświetla się przycisk z opcjami Dzień, Miesiąc i Tydzień. Obecnie wybrana jest opcja Dzień.
Rysunek 2. Przycisk wyboru pojedynczego z wybraną jedną opcją.

Tworzenie przycisku z segmentami umożliwiającymi wielokrotny wybór

Ten przykład pokazuje, jak utworzyć podzielony przycisk z ikonami, który umożliwia użytkownikom wybór kilku 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 inicjalizuje zmienną selectedOptions za pomocą zmiennych remember i mutableStateListOf. śledzi wybrany stan każdego przycisku.
  • Kod używa elementu MultiChoiceSegmentedButtonRow do umieszczania przycisków.
  • Wewnątrz 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 elementzie selectedOptions.
    • onCheckedChange po kliknięciu przycisku przełącza wybrany stan odpowiedniego elementu w komponencie selectedOptions.
    • icon wyświetla ikonę na podstawie wartości 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świetla się podzielony na segmenty komponent z opcjami „Chodzenie”, „Podróżowanie” i „Jazda”. Wybrane są obecnie opcje Chodzenie i Transport.
Rysunek 2. Przycisk z segmentami wielokrotnego wyboru z 2 wybranymi opcjami.

Dodatkowe materiały