Сегментированная кнопка

Используйте сегментированную кнопку, чтобы пользователи могли выбирать из нескольких вариантов, расположенных рядом друг с другом. Существует два типа сегментированных кнопок:

• Кнопка с одним вариантом выбора. Позволяет пользователям выбрать один вариант.
• Кнопка множественного выбора позволяет выбрать от двух до пяти объектов. Если вариантов больше пяти или они сложные, используйте чипы.

Поверхность API

Используйте макеты SingleChoiceSegmentedButtonRow и MultiChoiceSegmentedButtonRow, чтобы создать сегментированные кнопки. Эти макеты правильно размещают и масштабируют SegmentedButtons и имеют следующие ключевые параметры:

• space – позволяет настроить перекрытие между кнопками.
• content – содержит контент строки сегментированных кнопок, обычно представляющий собой последовательность элементов SegmentedButton.

Как создать сегментированную кнопку с одним вариантом выбора

В этом примере показано, как создать сегментированную кнопку с одним вариантом выбора:

@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

Ключевые моменты

• Инициализирует переменную selectedIndex с помощью remember и mutableIntStateOf, чтобы отслеживать индекс выбранной кнопки.
• Определяет список options, представляющих ярлыки кнопок.
• SingleChoiceSegmentedButtonRow позволяет выбрать только одну кнопку.
• Создает элемент SegmentedButton для каждого варианта внутри цикла forEachIndexed:
  • shape определяет форму кнопки на основе ее индекса и общего количества вариантов, используя SegmentedButtonDefaults.itemShape.
  • onClick обновляет selectedIndex с индексом нажатой кнопки.
  • selected задает состояние кнопки на основе selectedIndex.
  • label отображает метку кнопки, используя компонент Text.

Результат

Как создать сегментированную кнопку с возможностью выбора нескольких вариантов

В этом примере показано, как создать многовариантную сегментированную кнопку со значками, которая позволяет пользователям выбирать несколько вариантов:

@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

Ключевые моменты

• Код инициализирует переменную selectedOptions, используя remember и mutableStateListOf. Это позволяет отслеживать состояние каждой кнопки.
• В коде для кнопок используется элемент MultiChoiceSegmentedButtonRow.
• В цикле forEachIndexed код создает элемент SegmentedButton для каждого варианта:
  • shape определяет форму кнопки на основе ее индекса и общего количества вариантов.
  • checked задает состояние кнопки на основе соответствующего значения в selectedOptions.
  • onCheckedChange переключает выбранное состояние соответствующего элемента в selectedOptions при нажатии кнопки.
  • icon отображает значок на основе SegmentedButtonDefaults.Icon и состояния кнопки.
  • label отображает значок, соответствующий метке, используя компоненты Icon с подходящими векторными изображениями и описаниями контента.

Результат

Дополнительные ресурсы

• Материал 3: сегментированные кнопки