ปุ่มตัวเลือกช่วยให้ผู้ใช้เลือกตัวเลือกจากชุดตัวเลือกได้ คุณใช้ปุ่มตัวเลือกเมื่อเลือกได้เพียง 1 รายการจากรายการ หากผู้ใช้ต้องเลือกมากกว่า 1 รายการ ให้ใช้สวิตช์แทน
พื้นผิว API
ใช้ Composable RadioButton
เพื่อแสดงรายการตัวเลือกที่มี ห่อหุ้มRadioButton
ตัวเลือกและป้ายกำกับแต่ละรายการไว้ภายในคอมโพเนนต์ Row
เพื่อจัดกลุ่มตัวเลือกเหล่านั้น
เข้าด้วยกัน
RadioButton
มีพารามิเตอร์หลักต่อไปนี้
selected
: ระบุว่ามีการเลือกปุ่มตัวเลือกหรือไม่onClick
: ฟังก์ชัน Lambda ที่แอปของคุณเรียกใช้เมื่อผู้ใช้คลิกปุ่มตัวเลือก หากเป็นnull
ผู้ใช้จะโต้ตอบกับปุ่มตัวเลือกโดยตรงไม่ได้enabled
: ควบคุมว่าจะเปิดหรือปิดใช้ปุ่มตัวเลือก ผู้ใช้ จะโต้ตอบกับปุ่มตัวเลือกที่ปิดใช้อยู่ไม่ได้interactionSource
: ช่วยให้คุณสังเกตสถานะการโต้ตอบของปุ่มได้ เช่น มีการกด วางเมาส์ หรือโฟกัสหรือไม่
สร้างปุ่มตัวเลือกพื้นฐาน
ข้อมูลโค้ดต่อไปนี้แสดงรายการปุ่มตัวเลือกภายใน 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) ) } } } }
ประเด็นสำคัญเกี่ยวกับโค้ด
radioOptions
แสดงป้ายกำกับสำหรับปุ่มตัวเลือกremember
ฟังก์ชันที่ใช้ร่วมกันได้จะสร้างตัวแปรสถานะselectedOption
และฟังก์ชันเพื่ออัปเดตสถานะดังกล่าวที่เรียกว่าonOptionSelected
สถานะนี้มีตัวเลือกปุ่มตัวเลือกที่เลือกmutableStateOf(radioOptions[0])
จะเริ่มต้นสถานะเป็นรายการแรก ในรายการ "การโทร" เป็นรายการแรก ดังนั้นปุ่มตัวเลือกที่เลือกโดยค่าเริ่มต้นจึงเป็นปุ่มตัวเลือกของ "การโทร"
Modifier.selectableGroup()
ช่วยให้โปรแกรมอ่านหน้าจอทำงานได้อย่างถูกต้อง ซึ่งจะแจ้งให้ระบบทราบว่าองค์ประกอบภายในColumn
เป็นส่วนหนึ่งของกลุ่มที่เลือกได้ ซึ่งจะช่วยให้โปรแกรมอ่านหน้าจอรองรับได้อย่างเหมาะสมModifier.selectable()
ทำให้Row
ทั้งหมดทำหน้าที่เป็นรายการเดียวที่เลือกได้selected
ระบุว่ามีการเลือกRow
ปัจจุบันหรือไม่โดยอิงตามสถานะselectedOption
- ฟังก์ชัน Lambda
onClick
จะอัปเดตสถานะselectedOption
เป็นตัวเลือกที่คลิกเมื่อมีการคลิกRow
role = Role.RadioButton
แจ้งบริการการช่วยเหลือพิเศษว่าRow
ทำหน้าที่เป็นปุ่มตัวเลือก
RadioButton(...)
จะสร้างRadioButton
ที่ใช้ร่วมกันได้onClick = null
ในRadioButton
ช่วยปรับปรุงการช่วยเหลือพิเศษ ซึ่งจะป้องกันไม่ให้ปุ่มตัวเลือกจัดการเหตุการณ์การคลิกโดยตรง และช่วยให้ตัวแก้ไขRow
selectable
จัดการสถานะการเลือกและลักษณะการทำงานของการช่วยเหลือพิเศษได้
ผลลัพธ์

แหล่งข้อมูลเพิ่มเติม
- Material Design: ปุ่ม