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

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

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

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

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

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

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

รัฐ

ช่องทําเครื่องหมายอาจมีสถานะใดสถานะหนึ่งต่อไปนี้

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

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

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

การใช้งาน

คุณใช้ Composable 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

คำอธิบาย

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

ผลลัพธ์

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

รูปที่ 2 ช่องทำเครื่องหมายที่ไม่ได้เลือก

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

รูปที่ 3 ช่องทำเครื่องหมายที่เลือก

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

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

@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" เมื่อเลือกช่องทำเครื่องหมายย่อยทั้งหมด

หมายเหตุ: หากต้องการมีช่องทําเครื่องหมายที่มีสถานะไม่แน่นอน คุณต้องใช้ TriStateCheckbox เนื่องจากมีstateพารามิเตอร์ประเภท ToggleableState แต่ Checkbox ไม่มี

ผลลัพธ์

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

รูปที่ 4 ช่องทำเครื่องหมายที่ไม่ได้เลือก

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

รูปที่ 5 ช่องทำเครื่องหมายที่เลือก

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

รูปที่ 6 ช่องทำเครื่องหมายที่ไม่ได้เลือก

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

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