Tombol di Jetpack Compose Glimmer

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, ToggleButton adalah komponen interaktif yang mengubah tampilannya berdasarkan status yang dicentang. Tombol dioptimalkan untuk kacamata display guna memberikan transisi visual yang jelas dalam bentuk dan warna. Transisi ini menunjukkan kapan tindakan atau setelan aktif.

Gunakan tombol untuk menampilkan tindakan yang dapat diaktifkan atau dinonaktifkan. Tidak seperti tombol hanya ikon, tombol terutama menampilkan konten teks, meskipun mendukung slot ikon opsional untuk konteks tambahan.

Untuk kasus penggunaan lainnya, ada juga tombol standar dan tombol ikon.

Gambar 1. Contoh tombol di Jetpack Compose Glimmer yang digunakan untuk tindakan putar dan jeda dalam tata letak UI.

Anatomi

Tombol terdiri dari penampung yang berubah bentuk antara status dan label dengan ikon opsional.

Bagian Deskripsi

Penampung

Dianimasikan antara bentuk lingkaran (tidak dicentang) dan persegi panjang membulat (dicentang).

Label

Biasanya composable Text.

Ikon (opsional)

Slot awal atau akhir yang dapat bervariasi berdasarkan status.

Ukuran

Seperti tombol standar, tombol mendukung dua varian ukuran:

Ukuran Tinggi minimum Penggunaan default

Sedang

48.dp

Ukuran interaktif default.

Besar

72.dp

Tombol utama atau penekanan tinggi.

Default tombol

Secara default, tombol menggunakan ToggleButtonDefaults.animateShape. Hal ini akan membuat transisi yang mulus antara status berikut:

Class ToggleButtonColors mengelola resolusi warna untuk status berikut:

Animasi

Tombol menggunakan default berikut untuk animasi:

  • animateShape: Menyediakan Shape yang menginterpolasi ukuran sudut menggunakan spesifikasi animasi pegas (stiffness = 600f).
  • colors: Fungsi factory untuk menyesuaikan warna latar belakang dan konten untuk kedua status.
  • CheckedShape: RoundedCornerShape(20.dp) statis yang digunakan untuk status yang dicentang.
  • contentPadding: Mewarisi dari ButtonDefaults.contentPadding.

Contoh: Tombol

Kode berikut membuat tombol dasar:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}

Contoh: Tombol dengan ikon awal

Kode berikut membuat tombol dengan ikon awal:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}