Tombol radio

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

Gambar 1. Sepasang tombol pilihan dengan satu opsi yang dipilih.

Platform 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 nilainya 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 penting tentang kode

• radioOptions mewakili label untuk tombol pilihan.
• Fungsi composable remember membuat variabel status selectedOption dan fungsi untuk mengupdate status tersebut yang disebut onOptionSelected. Status ini menyimpan opsi tombol pilihan yang dipilih.
  • mutableStateOf(radioOptions[0]) menginisialisasi status ke item pertama dalam daftar. "Calls" adalah item pertama, sehingga merupakan tombol pilihan yang dipilih secara default.
• Modifier.selectableGroup() memastikan perilaku aksesibilitas yang tepat untuk pembaca layar. 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 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 mengelola status pilihan dan perilaku aksesibilitas.

Hasil

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

Referensi lainnya

• Desain Material: Tombol