หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

Box: คือคอนเทนเนอร์สําหรับช่องทําเครื่องหมาย
ทำเครื่องหมาย: นี่คือสัญญาณบอกสถานะซึ่งแสดงให้เห็นว่าช่องทำเครื่องหมาย เลือกไว้หรือไม่
ป้ายกำกับ: ข้อความที่อธิบายช่องทำเครื่องหมาย

รัฐ

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

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

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

ตัวอย่างคอมโพเนนต์ช่องทำเครื่องหมายในแต่ละสถานะทั้ง 3 สถานะ ได้แก่ ไม่ได้เลือก เลือก และไม่กำหนด — **รูปที่ 1** สถานะทั้งสามของช่องทำเครื่องหมาย ยกเลิกการเลือก ไม่กำหนด และเลือกไว้

การใช้งาน

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

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

ผลลัพธ์

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

ช่องทำเครื่องหมายที่ยกเลิกการเลือกแล้วที่มีป้ายกำกับ ข้อความด้านล่างระบุว่า "ยกเลิกการเลือกช่องทำเครื่องหมายแล้ว" — **รูปที่ 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" เมื่อช่องทำเครื่องหมายย่อยทั้งหมด เลือกไว้

ผลลัพธ์

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

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

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

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

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

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

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

ช่องทำเครื่องหมายดีไซน์ Material