Przycisk podzielony na segmenty

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

• Przycisk wyboru pojedynczego: pozwala użytkownikom wybrać jedną opcję.
• Przycisk wyboru wielokrotnego: 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 typu chip.

Rysunek 1. Przycisk wyboru pojedynczego (1) i przycisk wyboru wielokrotnego (2).

Interfejs API

Do tworzenia przycisków segmentowanych używaj układów SingleChoiceSegmentedButtonRow i MultiChoiceSegmentedButtonRow. Te układy prawidłowo pozycjonują i rozmieszczają SegmentedButton oraz mają te kluczowe parametry:

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

Tworzenie przycisku segmentowanego z możliwością wyboru jednej opcji

Ten przykład pokazuje, jak utworzyć przycisk segmentowany z możliwością wyboru jednej opcji:

@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ą remember i mutableIntStateOf, aby śledzić indeks wybranego przycisku.
• Definiuje listę options reprezentujących etykiety przycisków.
• SingleChoiceSegmentedButtonRow pozwala wybrać tylko jeden przycisk.
• Tworzy element SegmentedButton dla każdej opcji w pętli forEachIndexed:
  • shape definiuje kształt przycisku na podstawie jego indeksu i łącznej liczby opcji przy użyciu 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ą funkcji kompozycyjnej Text.

Wynik

Rysunek 2. Przycisk wyboru pojedynczego z wybraną jedną opcją.

Tworzenie przycisku segmentowanego z wieloma opcjami wyboru

Ten przykład pokazuje, jak utworzyć przycisk segmentowany z wieloma opcjami i 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 inicjuje zmienną selectedOptions za pomocą remember i mutableStateListOf. Śledzi stan zaznaczenia każdego przycisku.
• Kod używa elementu MultiChoiceSegmentedButtonRow do przechowywania przycisków.
• Wewnątrz pętli forEachIndexed kod tworzy element SegmentedButton dla każdej opcji:
  • shape definiuje 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 funkcji kompozycyjnych Icon z odpowiednimi wektorami obrazów i opisami treści.

Wynik

Rysunek 3. Przycisk segmentowy wielokrotnego wyboru z wybranymi 2 opcjami.

Dodatkowe materiały

• Material 3: przyciski segmentowe