Tombol dalam Glimmer Jetpack Compose

Perangkat XR yang kompatibel

Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.

Mempelajari jenis perangkat XR →

Mempelajari jenis perangkat XR →

Di Glimmer Jetpack Compose, Button adalah komponen interaktif yang dioptimalkan untuk input kacamata tampilan, yang menawarkan respons visual yang jelas melalui statusnya untuk memandu tindakan pengguna.

Tombol dibuat di atas sistem permukaan Jetpack Compose Glimmer, yang secara otomatis menangani properti fisik seperti batas dan kedalaman.

Tombol standar berisi label teks dan ikon opsional. Anda dapat menggunakannya untuk tindakan utama atau sekunder. Ada juga tombol khusus, seperti tombol ikon dan tombol toggle, yang ditentukan sebagai komponen terpisah di Jetpack Compose Glimmer.

Default

Besar

Anatomi

Tombol terdiri dari penampung dan label, dengan ikon di awal dan akhir yang bersifat opsional.

Ukuran

Tombol Glimmer Jetpack Compose mendukung dua varian ukuran. Nilai ini memengaruhi tinggi minimum dan padding internal.

Negara bagian

Tombol di Jetpack Compose Glimmer mengubah tampilannya untuk mengomunikasikan statusnya.

• Diaktifkan: Status default untuk tombol interaktif.
• Difokuskan: Saat difokuskan, tombol menerapkan GlimmerTheme.depthEffectLevels.level1 dan sorotan batas yang difokuskan.
• Ditekan: Saat diaktifkan, overlay putih semi-transparan diterapkan ke permukaan.
• Dinonaktifkan: Tombol tidak merespons input dan tampilan visualnya disesuaikan.

Default tombol

Default berikut berlaku untuk tombol standar:

• Secara default, tombol menggunakan GlimmerTheme.typography.bodySmall. Pastikan teks dalam tombol ringkas dan menjelaskan tindakan dengan jelas.
• Bentuk default untuk tombol adalah GlimmerTheme.shapes.large. Pembulatan yang konsisten ini membantu pengguna mengidentifikasi tombol di seluruh antarmuka kacamata tampilan.

Contoh: Tombol dengan teks dan ikon

Tombol dasar hanya menyertakan label teks, tetapi Anda juga dapat menambahkan ikon ke awal (menggunakan leadingIcon) atau akhir (menggunakan trailingIcon) teks untuk memberikan konteks tambahan.

Kode berikut membuat tombol dengan ikon di awal dan di akhir:

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

Grup tombol

Composable ButtonGroup memungkinkan Anda mengelompokkan tombol ke dalam baris yang dapat di-scroll yang berfungsi sebagai pengontrol fokus. Saat pengguna men-scroll, fokus akan otomatis berpindah untuk menandai tombol yang sesuai dengan posisi scroll saat ini.

Contoh: Grup tombol

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

Kontrol fokus dalam grup tombol

Anda dapat memindahkan fokus ke tombol mana pun dalam grup untuk mengontrol pemilihan secara manual.

Menyesuaikan dan mengontrol perilaku scrolling menggunakan status ButtonGroup:

1. Nyatakan status dengan rememberButtonGroupState.
2. Teruskan ke composable ButtonGroup.
3. Panggil animateScrollToItem (atau scrollToItem untuk men-scroll instan) untuk men-scroll ke item tertentu dan memindahkan fokus ke item tersebut secara otomatis.

Kode berikut memindahkan fokus dari satu tombol ke tombol lainnya saat diklik:

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