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à chưa đánh dấu. Trong ứng dụng, bạn có thể sử 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: nút điều khiển và thanh trượt. Thumb là phần có thể kéo của nút chuyển, còn track là nền. Người dùng có thể kéo nút thumb 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 nút chuyển để kiểm tra và xoá.

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

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: Cho biết nút chuyển đang bật hay tắt.
• colors: Màu sắc dùng cho nút chuyển.

Ví dụ sau đây là cách triển khai tối thiểu 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

Phương thức triển khai này có dạng như sau khi không được đánh dấu:

Đây là giao diện khi đượ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 một 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 nút chọn khi nút này được đánh dấu.
• colors: Sử dụng thuộc tính này để tuỳ chỉnh màu của rãnh và nút kéo.

Hình thu nhỏ tuỳ chỉnh

Bạn có thể truyền bất kỳ composable nào cho tham số thumbContent để tạo một con trỏ 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 nút:

@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 khi chưa được đánh dấu giống với ví dụ trong phần trước. Tuy nhiên, khi được đánh dấu, phương thức triển khai này sẽ có dạng như sau:

Tùy chỉnh màu

Ví dụ sau đây minh hoạ cách bạn có thể sử dụng tham số màu để thay đổi màu của nút bật/tắt và rãnh, có tính đến việc nút bật/tắt có được chọn 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:

Tài nguyên khác

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