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 penampilannya berdasarkan status yang dicentang. Tombol toggle dioptimalkan untuk kacamata tampilan guna memberikan transisi visual yang jelas dalam bentuk dan warna. Transisi ini menunjukkan kapan tindakan atau setelan aktif.

Gunakan tombol geser untuk menampilkan tindakan yang dapat diaktifkan atau dinonaktifkan. Tidak seperti tombol geser hanya ikon, tombol geser 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 toggle di Jetpack Compose Glimmer yang digunakan untuk tindakan putar dan jeda dalam tata letak UI.

Anatomi

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

Bagian Deskripsi

Penampung

Membuat animasi antara bentuk lingkaran (tidak dicentang) dan persegi panjang bulat (dicentang).

Label

Biasanya composable Text.

Ikon (opsional)

Slot di awal atau akhir yang dapat bervariasi berdasarkan negara bagian.

Ukuran

Seperti tombol standar, tombol toggle mendukung dua varian ukuran:

Ukuran Tinggi minimum Penggunaan default

Sedang

48.dp

Ukuran interaktif default.

Besar

72.dp

Tombol utama atau bertekanan tinggi.

Default tombol

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

Class ToggleButtonColors mengelola resolusi warna untuk status berikut:

Animasi

Tombol alih 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 ganti 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 ganti dengan ikon utama

Kode berikut membuat tombol toggle dengan ikon di depannya:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}