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

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

  • Кнопка выбора одного варианта : позволяет пользователям выбрать один из вариантов.
  • Кнопка множественного выбора : позволяет пользователям выбирать от двух до пяти элементов. Для более сложных вариантов или выбора более пяти элементов используйте фишки .
Представлен компонент в виде сегментированной кнопки. Первая кнопка позволяет сделать один выбор, а вторая — несколько.
Рисунок 1. Кнопка с одним выбором (1) и кнопка с несколькими выборами (2).

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

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

  • 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 .

Результат

Отображается компонент в виде сегментированной кнопки с вариантами «День», «Месяц» и «Неделя». В данный момент выбран вариант «День».
Рисунок 2. Кнопка с одним вариантом выбора.

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

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

@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. Многофункциональная сегментированная кнопка с двумя выбранными вариантами.

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