Chuyển đổi

Thành phần Switch cho phép người dùng chuyển đổi giữa hai trạng thái: đã đánh dấu và bỏ đánh dấu. Trong ứng dụng của mình, bạn có thể dùng nút chuyển để cho phép người dùng thực hiện một trong những thao tác sau:

• Bật hoặc tắt một chế độ cài đặt.
• Bật hoặc tắt một tính năng.
• Chọn một lựa chọn.

Thành phần này có hai phần: thumb và track. Nút thumb là phần có thể kéo của nút chuyển và nút nhấn là nền. Người dùng có thể kéo ngón tay cái sang trái hoặc phải để thay đổi trạng thái của nút chuyển. Họ cũng có thể nhấn vào công tắc để kiểm tra và xoá.

Hình 1. Thành phần nút chuyển.

Cách triển khai cơ bản

Hãy xem tài liệu tham khảo Switch để biết định nghĩa đầy đủ về API. Sau đây là một số tham số chính mà bạn có thể cần sử dụng:

• checked: Trạng thái ban đầu của nút chuyển.
• onCheckedChange: Lệnh gọi lại được gọi khi trạng thái của nút chuyển thay đổi.
• enabled: Nút chuyển ở trạng thái bật hay tắt.
• colors: Các màu dùng cho nút chuyển.

Ví dụ sau đây là cách triển khai tối giản của thành phần kết hợp Switch.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

Cách triển khai này sẽ xuất hiện như sau khi bạn bỏ đánh dấu:

Hình 2. Nút chuyển chưa đánh dấu.

Đây là giao diện khi được đánh dấu:

Hình 3. Một nút chuyển được đánh dấu.

Cách triển khai nâng cao

Sau đây là các tham số chính mà bạn có thể muốn sử dụng khi triển khai nút chuyển nâng cao hơn:

• thumbContent: Sử dụng thuộc tính này để tuỳ chỉnh giao diện của ngón cái khi nút này được đánh dấu.
• colors: Sử dụng tính năng này để tuỳ chỉnh màu của bản nhạc và các nút thu.

Thumb tuỳ chỉnh

Bạn có thể truyền bất kỳ thành phần kết hợp nào cho tham số thumbContent để tạo một thumb tuỳ chỉnh. Sau đây là ví dụ về một nút chuyển sử dụng biểu tượng tuỳ chỉnh cho ngón cái:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

Trong cách triển khai này, giao diện đã bỏ đánh dấu giống như ví dụ trong phần trước. Tuy nhiên, khi được kiểm tra, cách triển khai này sẽ xuất hiện như sau:

Hình 4. Nút chuyển có biểu tượng tuỳ chỉnh đã đánh dấu.

Màu tùy chỉnh

Ví dụ sau minh hoạ cách bạn có thể sử dụng tham số màu để thay đổi màu của nút thu và nút chuyển, có tính đến việc nút chuyển có được kiểm tra hay không.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

Phương thức triển khai có dạng như sau:

Hình 5. Nút chuyển có màu sắc tuỳ chỉnh.

Tài nguyên khác

• Tài liệu về giao diện người dùng Material