Thành phần kết hợp Slider
cho phép người dùng đưa ra lựa chọn trong
giá trị. Bạn có thể dùng thanh trượt để cho phép người dùng thực hiện các thao tác sau:
- Điều chỉnh chế độ cài đặt sử dụng khoảng giá trị, chẳng hạn như âm lượng và độ sáng.
- Lọc dữ liệu trong biểu đồ như khi đặt khoảng giá.
- Thông tin do người dùng cung cấp, chẳng hạn như đặt điểm xếp hạng trong một bài đánh giá.
Thanh trượt chứa bản nhạc, thumb, nhãn giá trị và dấu kiểm:
- Đường đua: Đường đi là thanh ngang thể hiện phạm vi của các giá trị mà thanh trượt có thể nhận.
- Thumb: Thumb là một phần tử điều khiển có thể kéo trên thanh trượt cho phép người dùng chọn một giá trị cụ thể trong phạm vi được xác định bởi bản nhạc.
- Dấu kiểm: Dấu kiểm là các dấu đánh dấu hoặc chỉ báo trực quan tùy chọn sẽ xuất hiện dọc theo đường trượt của thanh trượt.
![Thanh trượt có các dấu thumb, track và tick.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider.png?authuser=6&hl=vi)
Cách triển khai cơ bản
Hãy xem tài liệu tham khảo Slider
để biết định nghĩa đầy đủ về API. Một số lưu ý quan trọng
tham số cho thành phần kết hợp Slider
như sau:
value
: Giá trị hiện tại của thanh trượt.onValueChange
: Hàm lambda được gọi mỗi khi giá trị được đã thay đổi.enabled
: Một giá trị boolean cho biết liệu người dùng có thể tương tác hay không thanh trượt.
Sau đây là ví dụ về một thanh trượt đơn giản. Điều đó cho phép người dùng
chọn một giá trị từ 0.0
đến 1.0
. Vì người dùng có thể chọn bất kỳ giá trị nào trong
phạm vi đó, thanh trượt liên tục.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Phương thức triển khai có dạng như sau:
![Một thành phần thanh trượt có giá trị được chọn khoảng ba phần tư dọc theo đường đi.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-basic.png?authuser=6&hl=vi)
Cách triển khai nâng cao
Khi triển khai một thanh trượt phức tạp hơn, bạn có thể tận dụng thêm các tham số sau.
colors
: Một thực thể củaSliderColors
cho phép bạn kiểm soát màu của thanh trượt.valueRange
: Phạm vi giá trị mà thanh trượt có thể nhận.steps
: Số rãnh trên thanh trượt mà ngón cái bật vào.
Đoạn mã sau đây triển khai một thanh trượt có 3 bước, với một phạm vi
từ 0.0
đến 50.0
. Do ngón cái bám vào từng bước, nên thanh trượt này
phân biệt.
@Preview @Composable fun SliderAdvancedExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it }, colors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.secondary, activeTrackColor = MaterialTheme.colorScheme.secondary, inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, ), steps = 3, valueRange = 0f..50f ) Text(text = sliderPosition.toString()) } }
Quy trình triển khai có dạng như sau:
![Viết văn bản thay thế tại đây](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-advanced.png?authuser=6&hl=vi)
Thanh trượt phạm vi
Bạn cũng có thể dùng thành phần kết hợp RangeSlider
dành riêng. Điều này cho phép người dùng
chọn hai giá trị. Điều này có thể hữu ích trong những trường hợp như khi người dùng muốn
chọn giá tối thiểu và tối đa.
Ví dụ sau đây là một ví dụ tương đối đơn giản về hàm liên tục thanh trượt phạm vi.
@Preview @Composable fun RangeSliderExample() { var sliderPosition by remember { mutableStateOf(0f..100f) } Column { RangeSlider( value = sliderPosition, steps = 5, onValueChange = { range -> sliderPosition = range }, valueRange = 0f..100f, onValueChangeFinished = { // launch some business logic update with the state you hold // viewModel.updateSelectedSliderValue(sliderPosition) }, ) Text(text = sliderPosition.toString()) } }
![Thành phần thanh trượt dải ô với hai giá trị được chọn. Nhãn hiển thị giới hạn trên và giới hạn dưới của lựa chọn.](https://developer.android.google.cn/static/develop/ui/compose/images/components/slider-range.png?authuser=6&hl=vi)