Botão segmentado

Use um botão segmentado para que os usuários escolham entre um conjunto de opções lado a lado. Há dois tipos de botões segmentados:

• Botão de seleção única: permite que os usuários escolham uma opção.
• Botão de seleção múltipla: permite que os usuários escolham entre dois e cinco itens. Para escolhas mais complexas ou mais de cinco itens, use chips.

Superfície da API

Use os layouts SingleChoiceSegmentedButtonRow e MultiChoiceSegmentedButtonRow para criar botões segmentados. Esses layouts posicionam e dimensionam os SegmentedButtons corretamente e compartilham os seguintes parâmetros principais:

• space: ajusta a sobreposição entre os botões.
• content: contém o conteúdo da linha de botões segmentados, que geralmente é uma sequência de SegmentedButtons.

Criar um botão segmentado de seleção única

Este exemplo mostra como criar um botão segmentado de seleção única:

@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

Pontos principais sobre o código

• Inicializa uma variável selectedIndex usando remember e mutableIntStateOf para rastrear o índice do botão selecionado.
• Define uma lista de options que representam os rótulos dos botões.
• SingleChoiceSegmentedButtonRow permite selecionar apenas um botão.
• Cria um SegmentedButton para cada opção dentro do loop forEachIndexed:
  • shape define a forma do botão com base no índice e na contagem total de opções usando SegmentedButtonDefaults.itemShape.
  • onClick atualiza selectedIndex com o índice do botão clicado.
  • selected define o estado de seleção do botão com base em selectedIndex.
  • O label mostra o rótulo do botão usando o elemento combinável Text.

Resultado

Criar um botão segmentado de seleção múltipla

Este exemplo mostra como criar um botão segmentado de múltipla escolha com ícones que permitem que os usuários selecionem várias opções:

@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

Pontos principais sobre o código

• O código inicializa a variável selectedOptions usando remember e mutableStateListOf. Isso rastreia o estado selecionado de cada botão.
• O código usa MultiChoiceSegmentedButtonRow para conter os botões.
• Dentro do loop forEachIndexed, o código cria um SegmentedButton para cada opção:
  • shape define a forma do botão com base no índice e na contagem total de opções.
  • checked define o estado marcado do botão com base no valor correspondente em selectedOptions.
  • onCheckedChange alterna o estado selecionado do item correspondente em selectedOptions quando o botão é clicado.
  • icon mostra um ícone com base em SegmentedButtonDefaults.Icon e no estado marcado do botão.
  • O label mostra um ícone correspondente ao rótulo usando elementos combináveis Icon com vetores de imagem e descrições de conteúdo adequados.

Resultado

Outros recursos

• Material 3: Botões segmentados