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

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

ผลลัพธ์

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

• Material Design: ปุ่ม