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 Display
Mempelajari jenis perangkat XR →

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

Tombol dibuat di 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 tombol, yang ditentukan sebagai komponen terpisah di Jetpack Compose Glimmer.

Default

Contoh beberapa gaya tombol yang berbeda di Jetpack Compose Glimmer. Contoh ini menunjukkan tombol berukuran sedang dengan tiga status tombol: Diaktifkan (1), Difokuskan (2), dan Ditekan (3).

Besar

Contoh beberapa gaya tombol yang berbeda di Jetpack Compose Glimmer. Contoh ini menunjukkan tombol berukuran besar dengan tiga status tombol: Diaktifkan (1), Difokuskan (2), dan Ditekan (3).

Anatomi

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

Bagian Deskripsi

Penampung

Permukaan latar belakang tombol.

Label

Teks yang menjelaskan tindakan.

Ikon (opsional)

Indikator visual awal atau akhir.

Ukuran

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

Ukuran Tinggi minimum Penggunaan default

Sedang

48.dp

Tindakan dan daftar standar (default).

Besar

72.dp

Tindakan penekanan tinggi atau titik entri layar utama.

Negara bagian

Tombol di Jetpack Compose Glimmer mengubah tampilannya untuk mengomunikasikan statusnya.

  • Diaktifkan: Status default untuk tombol interaktif.
  • Difokuskan: Saat difokuskan, tombol akan menerapkan GlimmerTheme.depthEffectLevels.level1 dan sorotan batas yang difokuskan.
  • Ditekan: Saat diaktifkan, overlay putih semi-transparan akan 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 display.

Contoh: Tombol dengan teks

Kode berikut membuat tombol standar dengan teks:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

Contoh: Tombol dengan ikon awal dan akhir

Anda juga dapat menambahkan ikon ke awal (menggunakan leadingIcon) atau akhir (menggunakan trailingIcon) teks untuk memberikan konteks tambahan.

Kode berikut membuat tombol dengan ikon awal:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}