Slider

คอมโพสได้ Slider ช่วยให้ผู้ใช้เลือกค่าจากช่วงค่าได้ คุณอาจใช้แถบเลื่อนเพื่อให้ผู้ใช้ทำสิ่งต่อไปนี้

ปรับการตั้งค่าที่ใช้ช่วงค่า เช่น ระดับเสียงและความสว่าง
กรองข้อมูลในกราฟ เช่น เมื่อตั้งค่าช่วงราคา
ข้อมูลจากผู้ใช้ เช่น การตั้งค่าคะแนนในรีวิว

แถบเลื่อนประกอบด้วยแทร็ก ปุ่มเลื่อน ป้ายกำกับค่า และขีดบอกระยะ

แทร็ก: แทร็กคือแถบแนวนอนที่แสดงช่วงค่าที่แถบเลื่อนใช้ได้
ปุ่มเลื่อน: ปุ่มเลื่อนคือองค์ประกอบควบคุมที่ลากได้บนแถบเลื่อน ซึ่ง ช่วยให้ผู้ใช้เลือกค่าที่เฉพาะเจาะจงภายในช่วงที่แทร็กกำหนดได้
ขีดบอกระยะ: ขีดบอกระยะเป็นเครื่องหมายหรือตัวบ่งชี้ภาพที่ไม่บังคับ ซึ่ง ปรากฏตามแทร็กของแถบเลื่อน

แถบเลื่อนที่มีตัวเลื่อน แถบ และเครื่องหมายบอกปี — **รูปที่ 1** การใช้งานแถบเลื่อน

การใช้งานพื้นฐาน

ดูคำจำกัดความ API ทั้งหมดได้ที่ข้อมูลอ้างอิงของ Slider พารามิเตอร์หลักบางส่วนสำหรับคอมโพสได้ Slider มีดังนี้

value: ค่าปัจจุบันของแถบเลื่อน
onValueChange: แลมบ์ดาที่จะเรียกใช้ทุกครั้งที่ค่ามีการเปลี่ยนแปลง
enabled: ค่าบูลีนที่ระบุว่าผู้ใช้โต้ตอบกับแถบเลื่อนได้หรือไม่

ตัวอย่างต่อไปนี้เป็นแถบเลื่อนแบบตรงไปตรงมา ซึ่งอนุญาตให้ผู้ใช้เลือกค่าจาก 0.0 ถึง 1.0 เนื่องจากผู้ใช้เลือกค่าใดก็ได้ในขอบเขตนั้น แถบเลื่อนจึงเป็นแบบ ต่อเนื่อง

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}Slider.kt

การใช้งานนี้จะปรากฏดังนี้

คอมโพเนนต์แถบเลื่อนที่มีค่าที่เลือกประมาณ 3 ใน 4 ของแทร็ก — **รูปที่ 2** การใช้งานพื้นฐานของแถบเลื่อน

การใช้งานขั้นสูง

เมื่อใช้งานแถบเลื่อนที่ซับซ้อนมากขึ้น คุณยังใช้พารามิเตอร์ต่อไปนี้ได้ด้วย

colors: อินสแตนซ์ของ SliderColors ที่ช่วยให้คุณควบคุมสีของแถบเลื่อนได้
valueRange: ช่วงค่าที่แถบเลื่อนใช้ได้
steps: จำนวนรอยบากบนแถบเลื่อนที่ปุ่มเลื่อนจะสแนป

ข้อมูลโค้ดต่อไปนี้จะใช้งานแถบเลื่อนที่มี 3 ขั้นตอน โดยมีช่วง ตั้งแต่ 0.0 ถึง 50.0 เนื่องจากปุ่มเลื่อนจะสแนปกับแต่ละขั้นตอน แถบเลื่อนนี้จึงเป็นแบบ ไม่ต่อเนื่อง

@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

การใช้งานจะปรากฏดังนี้

แถบเลื่อนแบบไม่ต่อเนื่องที่มีช่วงตั้งแต่ 0 ถึง 50 โดยแสดงเครื่องหมายบอกปี 5 รายการในช่วงเวลาที่เท่ากัน โดยเลื่อนนิ้วไปใกล้เครื่องหมายขีดที่ 2 ซึ่งแสดงว่าเลือกค่า 16 — **รูปที่ 3** แถบเลื่อนที่มีขั้นตอนและช่วงค่าที่กำหนด

แถบเลื่อนช่วง

คุณยังใช้คอมโพสได้ RangeSlider โดยเฉพาะได้ด้วย ซึ่งช่วยให้ผู้ใช้เลือกค่าได้ 2 ค่า ซึ่งอาจมีประโยชน์ในกรณีต่างๆ เช่น เมื่อผู้ใช้ต้องการเลือกราคาสูงสุดและต่ำสุด

ตัวอย่างต่อไปนี้เป็นตัวอย่างที่ค่อนข้างตรงไปตรงมาของแถบเลื่อนช่วงแบบต่อเนื่อง

@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

คอมโพเนนต์แถบเลื่อนช่วงที่มีค่า 2 ค่าที่เลือก ป้ายกำกับจะแสดงขอบเขตบนและล่างของส่วนที่เลือก — **รูปที่ 4** การใช้งานแถบเลื่อนช่วง

แหล่งข้อมูลเพิ่มเติม

เอกสาร UI เนื้อหา