Кнопки в Jetpack Compose Glimmer

Применимые устройства XR
Это руководство поможет вам создать опыт использования этих типов XR-устройств.
Узнайте о типах устройств XR →
Очки ИИ
Узнайте о типах устройств XR →

В Jetpack Compose Glimmer компонент Button представляет собой интерактивный компонент, оптимизированный для ввода с помощью очков ИИ, который обеспечивает четкую визуальную обратную связь для состояний включения, наведения и нажатия, помогая пользователю выполнять действия.

Рисунок 1. Пример некоторых различных стилей кнопок в Jetpack Compose Glimmer.

Пример: варианты кнопок 

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

Ключевые моменты кода

  • Значки кнопок используют локальные векторные XML-рисунки ( R.drawable.ic_favorite ) с помощью painterResource , заменяя зависимость библиотеки Icons.Default для оптимизированной загрузки ресурсов.
  • Параметры leadingIcon и trailingIcon используются для внедрения составных иконок в макет кнопки, демонстрируя поддержку Jetpack Compose Glimmer гибкого позиционирования иконок.
  • Кнопки используют конфигурацию размеров по умолчанию, которая автоматически управляет внутренними отступами и масштабированием текста для соответствия стандартным спецификациям дизайна Jetpack Compose Glimmer без явных модификаторов размера.