Slider

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

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

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

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

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

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

• value: ค่าปัจจุบันของแถบเลื่อน
• onValueChange: Lambda ที่จะถูกเรียกใช้ทุกครั้งที่มีการเปลี่ยนแปลงค่า
• 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

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

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

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

• 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

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

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

นอกจากนี้ คุณยังใช้ Composable 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

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

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