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

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

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

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

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

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

สถานะ

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

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

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

การใช้งาน

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

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

ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้ Composable 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