ปุ่มตัวเลือก

ปุ่มตัวเลือกช่วยให้ผู้ใช้เลือกตัวเลือกจากชุดตัวเลือกได้ คุณใช้ปุ่มตัวเลือกได้เมื่อเลือกได้เพียงรายการเดียวจากรายการ หากผู้ใช้ต้องเลือกมากกว่า 1 รายการ ให้ใช้สวิตช์แทน

รูปที่ 1 ปุ่มตัวเลือก 2 ปุ่มที่เลือก 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)
                )
            }
        }
    }
}
RadioButton.kt

ประเด็นสำคัญเกี่ยวกับรหัส

• 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 ช่วยปรับปรุงการช่วยเหลือพิเศษ ซึ่งจะป้องกันไม่ให้ปุ่มตัวเลือกจัดการเหตุการณ์คลิกโดยตรง และอนุญาตให้ตัวแก้ไข selectable ของ Row จัดการสถานะการเลือกและลักษณะการช่วยเหลือพิเศษ

ผลลัพธ์

รูปที่ 2 ปุ่มตัวเลือก 3 ปุ่มที่เลือกตัวเลือก "เพื่อน" ไว้

แหล่งข้อมูลเพิ่มเติม

• Material Design: ปุ่ม