Przyciski w Jetpack Compose Glimmer

Odpowiednie urządzenia XR
Te wskazówki pomogą Ci tworzyć treści na te urządzenia XR.
Więcej informacji o typach urządzeń XR →
Okulary AI
Więcej informacji o typach urządzeń XR →

W Jetpack Compose Glimmer komponent Button to interaktywny komponent zoptymalizowany pod kątem sterowania za pomocą okularów z AI. Zapewnia on wyraźne wizualne informacje zwrotne o stanie włączonym, najechaniu i naciśnięciu, aby ułatwić użytkownikowi wykonywanie działań.

Rysunek 1. Przykłady różnych stylów przycisków w Glimmerze w Jetpack Compose.

Przykład: warianty przycisków

@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")
        }
    }
}

Najważniejsze informacje o kodzie

  • Ikony przycisków pochodzą z lokalnych plików XML z wektorowymi elementami rysunkowymi (R.drawable.ic_favorite) i korzystają z painterResource, co zastępuje zależność od biblioteki Icons.Default i optymalizuje wczytywanie komponentów.
  • Parametry leadingIcon i trailingIcon służą do wstawiania komponentów kompozycyjnych ikony do układu przycisku, co pokazuje, że biblioteka Jetpack Compose Glimmer obsługuje elastyczne pozycjonowanie ikon.
  • Przyciski korzystają z domyślnej konfiguracji rozmiaru, która automatycznie zarządza wewnętrznym dopełnieniem i skalowaniem tekstu, aby dopasować się do standardowych specyfikacji projektu Glimmer w Jetpack Compose bez jawnych modyfikatorów rozmiaru.