Tombol dalam Glimmer Jetpack Compose

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Kacamata AI
Mempelajari jenis perangkat XR →

Di Glimmer Jetpack Compose, komponen Button adalah komponen interaktif yang dioptimalkan untuk input kacamata AI, yang menawarkan respons visual yang jelas untuk status diaktifkan, ditunjuk kursor, dan ditekan guna memandu tindakan pengguna.

Gambar 1. Contoh beberapa gaya tombol yang berbeda di Glimmer Jetpack Compose.

Contoh: Variasi tombol

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

Poin penting tentang kode

  • Ikon tombol menggunakan vektor drawable XML lokal (R.drawable.ic_favorite) menggunakan painterResource, menggantikan dependensi library Icons.Default untuk pemuatan aset yang dioptimalkan.
  • Parameter leadingIcon dan trailingIcon digunakan untuk menyisipkan Composable ikon ke dalam tata letak tombol, yang menunjukkan dukungan Jetpack Compose Glimmer untuk penempatan ikon yang fleksibel.
  • Tombol menggunakan konfigurasi ukuran default, yang secara otomatis mengelola penskalaan teks dan padding internal agar selaras dengan spesifikasi desain Glimmer Jetpack Compose standar tanpa pengubah ukuran eksplisit.