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

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

ปุ่มตัวเลือก 2 ปุ่มที่ไม่มีป้ายกำกับ เลือกปุ่มซ้ายและวงกลมจะเปลี่ยนเป็นสีทึบเพื่อระบุสถานะที่เลือก ไม่ได้กรอกปุ่มขวา
รูปที่ 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)
                )
            }
        }
    }
}

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

  • 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 จัดการสถานะการเลือกและลักษณะการทำงานของการช่วยเหลือพิเศษได้

ผลลัพธ์

รายการปุ่มตัวเลือก 3 ปุ่มที่มีป้ายกำกับว่า "โทร" "ไม่ได้รับ" และ "เพื่อน" เลือกปุ่มตัวเลือก "เพื่อน" แล้ว
รูปที่ 2 ปุ่มตัวเลือก 3 ปุ่มที่มีตัวเลือก "เพื่อน" เลือกอยู่

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