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

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

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

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

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

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

รัฐ

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

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

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

ตัวอย่างคอมโพเนนต์ช่องทำเครื่องหมายในแต่ละสถานะจาก 3 สถานะ ได้แก่ ไม่ได้เลือก เลือก และไม่แน่นอน
รูปที่ 1 สถานะ 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"
    )
}

คำอธิบาย

โค้ดนี้จะสร้างช่องทำเครื่องหมายที่ไม่ได้เลือกไว้ในตอนแรก เมื่อผู้ใช้คลิกช่องทำเครื่องหมาย Lambda onCheckedChange จะอัปเดตสถานะ 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")
    }
}

คำอธิบาย

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

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

ผลลัพธ์

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

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

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

ชุดช่องทำเครื่องหมายที่มีป้ายกำกับซึ่งเลือกไว้พร้อมป้ายกำกับ ช่องแรกมีป้ายกำกับว่า "เลือกทั้งหมด" มีองค์ประกอบข้อความอยู่ด้านล่างซึ่งระบุว่า "เลือกตัวเลือกทั้งหมดแล้ว"
รูปที่ 5 ช่องทำเครื่องหมายที่เลือก

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

ชุดช่องทำเครื่องหมายที่ติดป้ายกำกับซึ่งไม่ได้เลือกพร้อมป้ายกำกับ ระบบจะยกเลิกการเลือกทั้งหมดยกเว้นรายการเดียว ช่องทำเครื่องหมายที่มีป้ายกำกับว่า "เลือกทั้งหมด" ไม่ได้ระบุสถานะ โดยแสดงเครื่องหมายขีดกลาง
รูปที่ 6 ช่องทำเครื่องหมายที่ไม่แน่นอน

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