Botones en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.

Más información sobre los tipos de dispositivos de realidad extendida →

Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, un Button es un componente interactivo optimizado para la entrada de display glasses, que ofrece comentarios visuales claros a través de sus estados para guiar las acciones del usuario.

Los botones se compilan en el sistema de superficie de Jetpack Compose Glimmer, que controla automáticamente las propiedades físicas, como los bordes y la profundidad.

El botón estándar contiene una etiqueta de texto y íconos opcionales. Puedes usarlo para acciones principales o secundarias. También hay botones especializados, como los botones de íconos y los botones de alternancia, que se definen como componentes separados en Jetpack Compose Glimmer.

Predeterminado

Grande

Anatomía

Un botón consta de un contenedor y una etiqueta, con íconos iniciales y finales opcionales.

Tamaños

Los botones de Jetpack Compose Glimmer admiten dos variantes de tamaño. Afectan la altura mínima y el padding interno.

Estados

Los botones de Jetpack Compose Glimmer cambian su apariencia para comunicar su estado.

• Habilitado: Es el estado predeterminado de un botón interactivo.
• Enfocado: Cuando está enfocado, el botón aplica un GlimmerTheme.depthEffectLevels.level1 y un resaltado de borde enfocado.
• Presionado: Cuando se activa, se aplica una superposición blanca semitransparente a la superficie.
• Inhabilitado: El botón no responde a la entrada y se ajusta su apariencia visual.

Valores predeterminados de los botones

Los siguientes valores predeterminados se aplican a los botones estándar:

• De forma predeterminada, los botones usan GlimmerTheme.typography.bodySmall. Asegúrate de que el texto dentro de los botones sea conciso y describa claramente la acción.
• La forma predeterminada de un botón es GlimmerTheme.shapes.large. Este redondeo coherente ayuda a los usuarios a identificar botones en la interfaz de display glasses.

Ejemplo: Botón con texto e íconos

Un botón básico incluye solo una etiqueta de texto, pero también puedes agregar íconos al comienzo (con leadingIcon) o al final (con trailingIcon) del texto para proporcionar contexto adicional.

Con el siguiente código, se crea un botón con un ícono inicial y final:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

Grupos de botones

El elemento componible ButtonGroup te permite agrupar botones en una fila desplazable que actúa como un controlador de enfoque. A medida que el usuario se desplaza, el enfoque se mueve automáticamente para resaltar el botón correspondiente a la posición de desplazamiento actual.

Ejemplo: Grupos de botones

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

Control de enfoque en grupos de botones

Puedes mover el enfoque a cualquier botón de un grupo para controlar manualmente la selección.

Personaliza y controla el comportamiento de desplazamiento con el estado ButtonGroup:

1. Declara el estado con rememberButtonGroupState.
2. Pásalo al elemento componible ButtonGroup.
3. Llama a animateScrollToItem (o scrollToItem para el desplazamiento instant áneo) para desplazarte a un elemento específico y mover automáticamente el enfoque a él.

Con el siguiente código, se mueve el enfoque de un botón a otro cuando se hace clic:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt