Tombol radio

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

Permukaan API

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

RadioButton mencakup parameter utama berikut:

• selected: Menunjukkan apakah tombol pilihan dipilih.
• onClick: Fungsi lambda yang dijalankan aplikasi Anda saat pengguna mengklik tombol pilihan. Jika 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, 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 utama 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 dipilih.
  • mutableStateOf(radioOptions[0]) menginisialisasi status ke item pertama dalam daftar. "Panggilan" adalah item pertama, sehingga merupakan tombol pilihan yang dipilih secara default.
• Modifier.selectableGroup() memastikan perilaku aksesibilitas yang tepat untuk pembaca layar. Fungsi ini memberi tahu sistem bahwa elemen dalam Column ini adalah 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 fungsi Row 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 mengelola status pilihan dan perilaku aksesibilitas.

Hasil

Referensi lainnya

• Desain Material: Tombol