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

Figura 1. Um botão de seleção única (1) e um botão de seleção múltipla (2).

Superfície da API

Use os layouts SingleChoiceSegmentedButtonRow e MultiChoiceSegmentedButtonRow para criar botões segmentados. Esses layouts garantem que as SegmentedButtons sejam posicionadas e dimensionadas 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ão segmentada, 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 de botão selecionado no momento.
• Define uma lista de options que representam os rótulos dos botões.
• SingleChoiceSegmentedButtonRow garante que apenas um botão possa ser selecionado.
• 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.
  • label exibe o rótulo do botão usando o elemento combinável Text.

Resultado

Figura 2. Um botão de seleção única com uma opção escolhida.

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

Este exemplo mostra como criar um botão segmentado de múltiplas escolhas com ícones que permite 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 de verificação 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 exibe um ícone com base em SegmentedButtonDefaults.Icon e no estado de verificação do botão.
  • label exibe um ícone correspondente ao rótulo, usando elementos combináveis Icon com vetores de imagem e descrições de conteúdo apropriados.

Resultado

Figura 2. Um botão de seleção múltipla com duas opções selecionadas.

Outros recursos

• Material 3: Botões segmentados