Thanh trượt

Thành phần kết hợp Slider cho phép người dùng lựa chọn trong một phạm vi các giá trị. Bạn có thể sử 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 các chế độ cài đặt sử dụng một loạt 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á.
• Dữ liệu do người dùng nhậ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 một bản nhạc, thumb, nhãn giá trị và dấu kiểm:

• Theo dõi: Đường đi là thanh ngang đại diện cho phạm vi giá trị mà thanh trượt có thể lấy.
• Thumb: Ngón cái là thành phần đ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 do bản nhạc xác định.
• Dấu kiểm: Dấu kiểm là các điểm đánh dấu hoặc chỉ báo trực quan không bắt buộc xuất hiện dọc theo thanh trượt.

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. Sau đây là một số tham số chính cho thành phần kết hợp Slider:

• 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 người dùng có thể tương tác với thanh trượt hay không.

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 đó, nên thanh trượt sẽ 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())
    }
}
Slider.kt

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

Cách triển khai nâng cao

Khi triển khai thanh trượt phức tạp hơn, bạn có thể sử dụng thêm các tham số sau.

• colors: Một thực thể của SliderColors cho phép bạn điều chỉnh 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 điều chỉnh theo.

Đoạn mã sau đây triển khai một thanh trượt có 3 bước, với phạm vi từ 0.0 đến 50.0. Vì ngón cái điều chỉnh theo từng bước nên thanh trượt này riêng 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())
    }
}
Slider.kt

Quy trình triển khai có dạng như sau:

Thanh trượt phạm vi

Bạn cũng có thể sử 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 các trường hợp như khi người dùng muốn chọn một mức 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ề thanh trượt phạm vi liên tục.

@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())
    }
}
Slider.kt

Tài nguyên khác

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