ช่องทำเครื่องหมาย

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

• เปิดหรือปิดรายการ
• เลือกจากตัวเลือกหลายรายการในรายการ
• ระบุความยินยอมหรือยอมรับ

กายวิภาคศาสตร์

ช่องทําเครื่องหมายประกอบด้วยองค์ประกอบต่อไปนี้

• ช่อง: คอนเทนเนอร์ของช่องทําเครื่องหมาย
• เลือก: ตัวบ่งชี้ภาพซึ่งแสดงว่าช่องทำเครื่องหมายเลือกไว้หรือไม่
• ป้ายกํากับ: ข้อความที่อธิบายช่องทําเครื่องหมาย

รัฐ

ช่องทําเครื่องหมายมีสถานะได้ 3 สถานะดังนี้

• ไม่ได้เลือก: ไม่ได้เลือกช่องทำเครื่องหมาย กล่องว่างเปล่า
• ไม่แน่นอน: ช่องทําเครื่องหมายอยู่ในสถานะไม่แน่นอน ในกล่องมีเครื่องหมายขีด
• เลือก: เลือกช่องทําเครื่องหมายแล้ว ช่องมีเครื่องหมายถูก

ภาพต่อไปนี้จะแสดงสถานะสามอย่างของช่องทำเครื่องหมาย

การใช้งาน

คุณสามารถใช้คอมโพสิชัน Checkbox เพื่อสร้างช่องทําเครื่องหมายในแอปได้ โดยมีพารามิเตอร์หลักๆ เพียงไม่กี่รายการที่ควรทราบ ดังนี้

• checked: บูลีนที่บันทึกว่ามีการเลือกช่องทำเครื่องหมายแล้วหรือไม่
• onCheckedChange(): ฟังก์ชันที่แอปเรียกใช้เมื่อผู้ใช้แตะช่องทําเครื่องหมาย

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้คอมโพสิเบิล Checkbox

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text(
            "Minimal checkbox"
        )
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }

    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}
Checkbox.kt

คำอธิบาย

โค้ดนี้จะสร้างช่องทําเครื่องหมายที่ไม่ได้เลือกไว้ตั้งแต่แรก เมื่อผู้ใช้คลิกช่องทำเครื่องหมาย lambda onCheckedChange จะอัปเดตสถานะ checked

ผลลัพธ์

ตัวอย่างนี้จะสร้างคอมโพเนนต์ต่อไปนี้เมื่อไม่ได้เลือก

และนี่คือลักษณะที่ช่องทำเครื่องหมายเดียวกันจะปรากฏเมื่อเลือก

ตัวอย่างขั้นสูง

ต่อไปนี้เป็นตัวอย่างที่ซับซ้อนมากขึ้นของวิธีใช้ช่องทําเครื่องหมายในแอป ข้อมูลโค้ดนี้มีช่องทําเครื่องหมายหลักและช่องทําเครื่องหมายย่อยหลายช่อง เมื่อผู้ใช้แตะช่องทำเครื่องหมายหลัก แอปจะเลือกช่องทำเครื่องหมายย่อยทั้งหมด

@Composable
fun CheckboxParentExample() {
    // Initialize states for the child checkboxes
    val childCheckedStates = remember { mutableStateListOf(false, false, false) }

    // Compute the parent state based on children's states
    val parentState = when {
        childCheckedStates.all { it } -> ToggleableState.On
        childCheckedStates.none { it } -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }

    Column {
        // Parent TriStateCheckbox
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("Select all")
            TriStateCheckbox(
                state = parentState,
                onClick = {
                    // Determine new state based on current state
                    val newState = parentState != ToggleableState.On
                    childCheckedStates.forEachIndexed { index, _ ->
                        childCheckedStates[index] = newState
                    }
                }
            )
        }

        // Child Checkboxes
        childCheckedStates.forEachIndexed { index, checked ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text("Option ${index + 1}")
                Checkbox(
                    checked = checked,
                    onCheckedChange = { isChecked ->
                        // Update the individual child state
                        childCheckedStates[index] = isChecked
                    }
                )
            }
        }
    }

    if (childCheckedStates.all { it }) {
        Text("All options selected")
    }
}
Checkbox.kt

คำอธิบาย

ต่อไปนี้คือประเด็นสำคัญหลายประการที่คุณควรทราบจากตัวอย่างนี้

• การจัดการสถานะ:
  • childCheckedStates: รายการบูลีนที่ใช้ mutableStateOf() เพื่อติดตามสถานะ "เลือก" ของช่องทําเครื่องหมายย่อยแต่ละช่อง
  • parentState: ToggleableState ที่มีค่ามาจากสถานะของช่องทําเครื่องหมายย่อย
• คอมโพเนนต์ UI
  • TriStateCheckbox: จําเป็นสําหรับช่องทําเครื่องหมายของผู้ปกครองเนื่องจากมีพารามิเตอร์ state ที่ช่วยให้คุณตั้งค่าเป็น "ไม่แน่ใจ" ได้
  • Checkbox: ใช้สำหรับช่องทําเครื่องหมายย่อยแต่ละช่องที่มีสถานะลิงก์กับองค์ประกอบที่เกี่ยวข้องใน childCheckedStates
  • Text: แสดงป้ายกำกับและข้อความ ("เลือกทั้งหมด" "ตัวเลือก X" "ตัวเลือกทั้งหมดที่เลือก")
• ตรรกะ:
  • onClick ของช่องทำเครื่องหมายระดับบนสุดจะอัปเดตช่องทำเครื่องหมายย่อยทั้งหมดให้ตรงข้ามกับสถานะระดับบนสุดปัจจุบัน
  • onCheckedChange ของช่องทำเครื่องหมายย่อยแต่ละช่องจะอัปเดตสถานะที่เกี่ยวข้องในรายการ childCheckedStates
  • โค้ดจะแสดง "All options selected" เมื่อเลือกช่องทําเครื่องหมายย่อยทั้งหมดแล้ว

ผลลัพธ์

ตัวอย่างนี้จะสร้างคอมโพเนนต์ต่อไปนี้เมื่อไม่ได้เลือกช่องทําเครื่องหมายทั้งหมด

ในทํานองเดียวกัน คอมโพเนนต์จะปรากฏเช่นนี้เมื่อเลือกตัวเลือกทั้งหมดแล้ว เช่นเดียวกับเมื่อผู้ใช้แตะ "เลือกทั้งหมด"

เมื่อเลือกเพียงตัวเลือกเดียว ช่องทำเครื่องหมายหลักจะแสดงสถานะไม่แน่นอน ดังนี้

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

• ช่องทำเครื่องหมายของ Material Design