Hộp đánh dấu

Hộp đánh dấu cho phép người dùng chọn một hoặc nhiều mục trong danh sách. Bạn có thể dùng hộp đánh dấu để cho phép người dùng làm những việc sau:

• Bật hoặc tắt một mục.
• Chọn trong số nhiều lựa chọn trong danh sách.
• Cho biết sự đồng ý hoặc chấp nhận.

Phân tích

Hộp đánh dấu bao gồm các phần tử sau:

• Hộp: Đây là vùng chứa cho hộp đánh dấu.
• Dấu đánh dấu: Đây là chỉ báo trực quan cho biết liệu hộp đánh dấu có được chọn hay không.
• Nhãn: Đây là văn bản mô tả hộp đánh dấu.

Trạng thái

Hộp đánh dấu có thể ở một trong 3 trạng thái sau:

• Chưa chọn: Hộp đánh dấu chưa được chọn. Hộp này trống.
• Không xác định: Hộp đánh dấu ở trạng thái không xác định. Hộp này chứa dấu gạch ngang.
• Đã chọn: Hộp đánh dấu đã được chọn. Hộp này chứa dấu đánh dấu.

Hình ảnh sau đây minh hoạ 3 trạng thái của hộp đánh dấu.

Triển khai

Bạn có thể dùng thành phần kết hợp Checkbox để tạo hộp đánh dấu trong ứng dụng của mình. Bạn chỉ cần lưu ý một vài tham số chính:

• checked: Giá trị boolean ghi lại xem hộp đánh dấu đã được đánh dấu hay chưa.
• onCheckedChange(): Hàm mà ứng dụng gọi khi người dùng nhấn vào hộp đánh dấu.

Đoạn mã sau đây minh hoạ cách dùng thành phần kết hợp 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

Giải thích

Mã này tạo một hộp đánh dấu ban đầu chưa được đánh dấu. Khi người dùng nhấp vào hộp đánh dấu, biểu thức lambda onCheckedChange sẽ cập nhật trạng thái checked.

Kết quả

Ví dụ này tạo ra thành phần sau khi chưa được đánh dấu:

Và đây là giao diện của cùng một hộp đánh dấu khi được đánh dấu:

Ví dụ nâng cao

Sau đây là ví dụ phức tạp hơn về cách bạn có thể triển khai hộp đánh dấu trong ứng dụng của mình. Trong đoạn mã này, có một hộp đánh dấu mẹ và một loạt hộp đánh dấu con. Khi người dùng nhấn vào hộp đánh dấu mẹ, ứng dụng sẽ đánh dấu tất cả hộp đánh dấu con.

@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

Giải thích

Sau đây là một số điểm bạn cần lưu ý trong ví dụ này:

• Quản lý trạng thái:
  • childCheckedStates: Danh sách các giá trị boolean dùng mutableStateOf() để theo dõi trạng thái đã đánh dấu của từng hộp đánh dấu con.
  • parentState: ToggleableState có giá trị bắt nguồn từ trạng thái của các hộp đánh dấu con.
• Thành phần giao diện người dùng:
  • TriStateCheckbox: Cần thiết cho hộp đánh dấu mẹ vì hộp này có tham số state cho phép bạn đặt thành không xác định.
  • Checkbox: Dùng cho từng hộp đánh dấu con có trạng thái được liên kết với phần tử tương ứng trong childCheckedStates.
  • Text: Hiển thị nhãn và thông báo ("Chọn tất cả", "Lựa chọn X", "Đã chọn tất cả lựa chọn").
• Logic:
  • onClick của hộp đánh dấu mẹ cập nhật tất cả hộp đánh dấu con thành trạng thái đối diện với trạng thái mẹ hiện tại.
  • onCheckedChange của từng hộp đánh dấu con cập nhật trạng thái tương ứng trong danh sách childCheckedStates.
  • Mã này hiển thị "All options selected" (Đã chọn tất cả lựa chọn) khi tất cả hộp đánh dấu con được đánh dấu.

Kết quả

Ví dụ này tạo ra thành phần sau khi tất cả hộp đánh dấu chưa được đánh dấu.

Tương tự, đây là giao diện của thành phần khi tất cả lựa chọn được đánh dấu, chẳng hạn như khi người dùng nhấn vào chọn tất cả:

Khi chỉ một lựa chọn được đánh dấu, hộp đánh dấu mẹ sẽ hiển thị trạng thái không xác định:

Tài nguyên khác

• Hộp đánh dấu trong Material Design