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, bạn có thể sử dụng một nút chuyển để cho phép người dùng thực hiện một trong những việ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. Ngón cái là phần có thể kéo của nút chuyển, còn bản nhạc là phần nền. Người dùng có thể kéo ngón 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 nút chuyển để kiểm tra và xoá 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
: Cho biết nút chuyển này đang 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 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 } ) }
Phương thức triển khai này có dạng như sau khi được bỏ đá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 nên sử dụng khi triển khai nút chuyển nâng cao hơn:
thumbContent
: Sử dụng tính năng này để tuỳ chỉnh giao diện của ngón cái khi được đánh dấu.colors
: Dùng tính năng này để tuỳ chỉnh màu của bản nhạc và thumb.
Ngón tay cái 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 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 tay 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 cách triển khai này, giao diện được bỏ đánh dấu giống như ví dụ trong phần trước. Tuy nhiên, khi được chọn, cách triển khai này sẽ xuất hiện như sau:
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 thumb và track, có tính đến việc liệu công tắc đó 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, ) ) }
Phương thức triển khai có dạng như sau: