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 một nút chuyển để cho phép người dùng thực hiện một trong
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à nút kéo của nút chuyển và bản nhạc 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 để kiểm tra và xoá nội dung đó.
![Ví dụ về thành phần Chuyển đổi ở cả chế độ sáng và tối.](https://developer.android.com/static/develop/ui/compose/images/components/switches.png?authuser=19&hl=vi)
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ố thông 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
: Một lệnh gọi lại được gọi khi trạng thái của các thay đổi của công tắc.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 } ) }
Cách triển khai này sẽ xuất hiện như sau khi bạn bỏ đánh dấu:
![Một nút chuyển cơ bản không được đánh dấu.](https://developer.android.com/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=19&hl=vi)
Đây là giao diện khi được đánh dấu:
![Nút chuyển cơ bản được đánh dấu.](https://developer.android.com/static/develop/ui/compose/images/components/switch.png?authuser=19&hl=vi)
Cách triển khai nâng cao
Các thông số chính mà bạn có thể muốn sử dụng khi triển khai một chế độ xem nâng cao hơn như sau:
thumbContent
: Sử dụng thuộc tính này để tuỳ chỉnh giao diện của ngón cái khi nó đã được chọn.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 thuộc tính tuỳ chỉnh
ngón cái. 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 } ) }
Trong phương thức 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 chọn, quá trình triển khai này sẽ xuất hiện dưới dạng sau:
![Nút chuyển sử dụng thông số thumbContent để hiển thị biểu tượng tuỳ chỉnh khi được đánh dấu.](https://developer.android.com/static/develop/ui/compose/images/components/switch-icon.png?authuser=19&hl=vi)
Màu tùy chỉnh
Ví dụ sau đây minh hoạ cách bạn có thể sử dụng thông số màu để thay đổi màu của nút chuyển và nút chuyển, tính đến việc đã chọn nút chuyển.
@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, ) ) }
Phương thức triển khai có dạng như sau:
![Nút chuyển sử dụng tham số màu để hiển thị nút chuyển có các màu tuỳ chỉnh cho cả nút thumb và tack.](https://developer.android.com/static/develop/ui/compose/images/components/switch-colors.png?authuser=19&hl=vi)