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 làm những việc sau:

  • Điều chỉnh các chế độ cài đặt sử dụng một dải 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á.
  • Thông tin do người dùng nhập, chẳng hạn như đặt điểm xếp hạng trong bài đánh giá.

Thanh trượt chứa một dải, nút kéo, nhãn giá trị và dấu kiểm:

  • Thanh trượt: Thanh trượt là thanh ngang thể hiện dải giá trị mà thanh trượt có thể nhận.
  • Nút kéo: Nút kéo là một thành phần điều khiển có thể kéo được 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 dải 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 rãnh của thanh trượt.
Thanh trượt có nút kéo, rãnh và dấu kiểm.
Hình 1. Cách triển khai thanh trượt.

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

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: Một hàm 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. Thành phần 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 này 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())
    }
}

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 3/4 thanh trượt.
Hình 2. Cách triển khai cơ bản của thanh trượt.

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ể 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 sắc của thanh trượt.
  • valueRange: Phạm vi giá trị mà thanh trượt có thể nhận.
  • steps: Số lượng khía trên thanh trượt mà nút điều khiển bám 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ì thanh trượt này điều chỉnh theo từng bước nên đây là thanh trượt 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())
    }
}

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

Thanh trượt riêng biệt có phạm vi từ 0 đến 50, hiển thị 5 dấu kiểm cách đều nhau. Nút kéo nằm gần dấu kiểm thứ hai, cho biết giá trị đã chọn là 16.
Hình 3. Thanh trượt có các bước và phạm vi giá trị đã đặt.

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 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à giá tối đa.

Ví dụ sau đây là một ví dụ tương đối đơn giản về thanh trượt dải ô 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())
    }
}

Thành phần thanh trượt dải ô có hai giá trị được chọn. Một nhãn cho thấy giới hạn trên và giới hạn dưới của lựa chọn.
Hình 4. Cách triển khai thanh trượt phạm vi.

Tài nguyên khác