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ể sử 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.
• Thể hiện sự đồng ý hoặc chấp nhận.

Lưu ý: Sử dụng hộp đánh dấu thay vì nút chuyển hoặc nút chọn nếu người dùng có thể chọn nhiều lựa chọn trong danh sách.

Phân tích

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

• Hộp: Đây là vùng chứa cho hộp đánh dấu.
• Dấu kiểm: Đây là chỉ báo trực quan cho biết 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.

Tiểu bang

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

• Chưa chọn: Hộp đánh dấu chưa được chọn. Hộp 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 một dấu gạch ngang.
• Đã chọn: Hộp đánh dấu đã được chọn. Hộp có dấu kiểm.

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

Hình 1. Ba trạng thái của hộp đánh dấu. Chưa chọn, không xác định và đã chọn.

Triển khai

Bạn có thể sử dụng composable Checkbox để tạo hộp đánh dấu trong ứng dụng. Bạn chỉ cần lưu ý một vài tham số chính:

• checked: Boolean ghi lại trạng thái hộp đánh dấu được chọn hay bỏ chọn.
• 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 sử 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 không được đánh dấu. Khi người dùng nhấp vào hộp đánh dấu, hàm 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 không được đánh dấu:

Hình 2. Hộp đánh dấu chưa được chọn

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

Hình 3. Hộp đánh dấu đã chọn

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. 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 boolean sử dụng mutableStateOf() để theo dõi trạng thái đã đánh dấu của từng hộp đánh dấu con.
  • parentState: Một 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 hộp này thành không xác định.
  • Checkbox: Được dùng cho mỗi hộp đánh dấu con có trạng thái 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ẹ sẽ cập nhật tất cả hộp đánh dấu con thành trạng thái ngược lại với trạng thái hiện tại của hộp đánh dấu mẹ.
  • onCheckedChange của mỗi hộp đánh dấu con sẽ 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" khi tất cả hộp đánh dấu con đều được đánh dấu.

Lưu ý: Nếu muốn có một hộp đánh dấu có trạng thái không xác định, bạn phải sử dụng TriStateCheckbox. Nguyên nhân là do hàm này có tham số state thuộc loại ToggleableState, trong khi Checkbox thì không.

Kết quả

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

Hình 4. Hộp đánh dấu chưa được chọn

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

Hình 5. Hộp đánh dấu đã chọn

Khi chỉ có 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:

Hình 6. Hộp đánh dấu không xác định

Tài nguyên khác

• Hộp kiểm Material Design