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.

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ówSegmentedButton
.
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) } ) } } }
Najważniejsze informacje o kodzie
- Inicjuje zmienną
selectedIndex
za pomocą funkcjiremember
imutableIntStateOf
, 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ętliforEachIndexed
:shape
określa kształt przycisku na podstawie jego indeksu i łącznej liczby opcji za pomocąSegmentedButtonDefaults.itemShape
.onClick
aktualizujeselectedIndex
indeksem klikniętego przycisku.selected
określa stan wyboru przycisku na podstawie wartościselectedIndex
.label
wyświetla etykietę przycisku za pomocą elementu kompozycyjnegoText
.
Wynik

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" ) } } ) } } }
Najważniejsze informacje o kodzie
- Kod inicjuje zmienną
selectedOptions
za pomocąremember
imutableStateListOf
. Śledzi to stan wybranego przycisku. - Kod używa elementu
MultiChoiceSegmentedButtonRow
do umieszczania przycisków. - W pętli
forEachIndexed
kod tworzySegmentedButton
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 wselectedOptions
.onCheckedChange
przełącza stan zaznaczenia odpowiedniego elementu wselectedOptions
po kliknięciu przycisku.icon
wyświetla ikonę na podstawieSegmentedButtonDefaults.Icon
i stanu zaznaczenia przycisku.label
wyświetla ikonę odpowiadającą etykiecie, używając elementów kompozycyjnychIcon
z odpowiednimi wektorami obrazów i opisami treści.
Wynik

Dodatkowe materiały
- Material 3: przyciski segmentowane