Slider

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

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

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

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

การติดตั้งใช้งานขั้นพื้นฐาน

ดูคำจำกัดความ API ฉบับเต็มได้ที่ข้อมูลอ้างอิง Slider พารามิเตอร์หลักบางส่วนสําหรับคอมโพสิเบิล 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

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

คอมโพเนนต์แถบเลื่อนที่มีค่าที่เลือกไว้ประมาณ 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

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

เขียนข้อความแสดงแทนที่นี่
รูปที่ 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 การใช้แถบเลื่อนช่วง

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