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ể dùng thanh trượt để cho phép người dùng làm những việc sau:

• Điều chỉnh các chế độ cài đặt sử dụng một phạm vi giá trị, chẳng hạn như âm lượng và độ sáng.
• Lọc dữ liệu trong biểu đồ, chẳng hạn như khi đặt khoảng giá.
• Hoạt động đầu vào của người dùng, chẳng hạn như đặt mức xếp hạng trong bài đánh giá.

Thanh trượt chứa một thanh trượt, nút điều khiển, nhãn giá trị và dấu chia:

• Thanh trượt: Thanh trượt là thanh ngang biểu thị phạm vi giá trị mà thanh trượt có thể nhận.
• Nút điều khiển: Nút điều khiển 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 do thanh trượt xác định.
• Dấu chia: Dấu chia là các dấu hiệ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.

Hình 1. Phương thức triển khai thanh trượt.

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

Xem tài liệu tham khảo về 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: Một lambda được gọi mỗi khi giá trị thay đổi.
• enabled: Giá trị boolean cho biết người dùng có thể tương tác với thanh trượt hay không.

Ví dụ sau đây là một thanh trượt đơn giản. Thanh trượt này 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 là 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:

Hình 2. Phương thức triển khai cơ bản của thanh trượt.

Phương thức 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ể sử dụng thêm các tham số sau.

• colors: Một thực thể của SliderColors 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ố lượng khấc trên thanh trượt mà nút điều khiển sẽ khớp vào.

Đ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ì nút điều khiển khớp vào từng bước, nên thanh trượt này là rời rạc.

@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

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

Hình 3. Thanh trượt có các bước và một phạm vi giá trị đã đặt.

Lưu ý: Điểm bắt đầu và điểm kết thúc của thanh trượt được tính là "các bước". Trong ví dụ trước, phạm vi là 0f..50f và số lượng steps là 3, mỗi khoảng dọc theo phạm vi là 12.5 vì điểm bắt đầu và điểm kết thúc của thanh trượt cũng là các khoảng mà người dùng có thể chọn.

Lưu ý: Bạn cũng có thể truyền Slider một thành phần kết hợp thumb và track để tuỳ chỉnh kỹ hơn giao diện của thành phần.

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. Thành phần này cho phép người dùng chọn 2 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 giá tối thiểu và giá 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

Hình 4. Phương thức triển khai thanh trượt phạm vi.

Tài nguyên khác

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