Кнопки в 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 используются для внедрения элементов Icon Composable в макет кнопки, демонстрируя поддержку гибкого позиционирования значков в Jetpack Compose Glimmer.
  • Кнопки используют конфигурацию размеров по умолчанию, которая автоматически управляет внутренними отступами и масштабированием текста в соответствии со стандартными спецификациями дизайна Jetpack Compose Glimmer без явного указания модификаторов размера.