Tombol radio

Tombol pilihan memungkinkan pengguna memilih opsi dari kumpulan opsi. Anda menggunakan tombol pilihan jika hanya satu item yang dapat dipilih dari daftar. Jika pengguna perlu memilih lebih dari satu item, gunakan tombol sebagai gantinya.

Gambar 1. Sepasang tombol pilihan dengan satu opsi dipilih.

Platform API

Gunakan composable RadioButton untuk mencantumkan opsi yang tersedia. Gabungkan setiap opsi RadioButton dan labelnya di dalam komponen Row untuk mengelompokkan opsi tersebut.

RadioButton menyertakan parameter utama berikut:

• selected: Menunjukkan apakah tombol pilihan dipilih.
• onClick: Fungsi lambda yang dieksekusi saat tombol pilihan diklik. Jika ini adalah null, pengguna tidak dapat berinteraksi langsung dengan tombol pilihan.
• enabled: Mengontrol apakah tombol pilihan diaktifkan atau dinonaktifkan. Pengguna tidak dapat berinteraksi dengan tombol pilihan yang dinonaktifkan.
• interactionSource: Memungkinkan Anda mengamati status interaksi tombol, misalnya, apakah tombol ditekan, diarahkan kursor, atau difokuskan.

Membuat tombol pilihan dasar

Cuplikan kode berikut merender daftar tombol pilihan dalam Column:

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

Poin penting tentang kode

• radioOptions mewakili label untuk tombol pilihan.
• Fungsi composable remember membuat variabel status selectedOption dan fungsi untuk memperbarui status tersebut yang disebut onOptionSelected. Status ini menyimpan opsi tombol pilihan yang saat ini dipilih.
  • mutableStateOf(radioOptions[0]) menginisialisasi status ke item pertama dalam daftar. "Panggilan" adalah item pertama, sehingga tombol pilihan ini dipilih secara default.
• Modifier.selectableGroup() memastikan perilaku aksesibilitas yang tepat untuk pembaca layar. Ini memberi tahu sistem bahwa elemen dalam Column ini merupakan bagian dari grup yang dapat dipilih, yang memungkinkan dukungan pembaca layar yang tepat.
• Modifier.selectable() membuat seluruh Row bertindak sebagai satu item yang dapat dipilih.
  • selected menunjukkan apakah Row saat ini dipilih berdasarkan status selectedOption.
  • Fungsi lambda onClick memperbarui status selectedOption ke opsi yang diklik saat Row diklik.
  • role = Role.RadioButton memberi tahu layanan aksesibilitas bahwa Row berfungsi sebagai tombol pilihan.
• RadioButton(...) membuat composable RadioButton.
  • onClick = null di RadioButton meningkatkan aksesibilitas. Hal ini mencegah tombol pilihan menangani peristiwa klik secara langsung, dan memungkinkan pengubah selectable Row untuk mengelola status pemilihan dan perilaku aksesibilitas.

Hasil

Gambar 2. Tiga tombol pilihan dengan opsi "Teman" dipilih.

Referensi lainnya

• Desain Material: Tombol