Composable ของ Slider
ช่วยให้ผู้ใช้เลือกได้จาก
คุณอาจใช้แถบเลื่อนเพื่อให้ผู้ใช้ดำเนินการต่อไปนี้ได้
- ปรับการตั้งค่าที่ใช้ช่วงค่าต่างๆ เช่น ระดับเสียงและความสว่าง
- กรองข้อมูลในกราฟ เช่นเดียวกับเมื่อตั้งค่าช่วงราคา
- ข้อมูลจากผู้ใช้ เช่น การกำหนดคะแนนในรีวิว
แถบเลื่อนจะประกอบด้วยแทร็ก "นิ้วหัวแม่มือ" ป้ายกำกับค่า และเครื่องหมายถูก
- แทร็ก: แทร็กคือแท่งแนวนอนที่แสดงช่วงของ ที่แถบเลื่อนยอมรับได้
- นิ้วโป้ง: นิ้วโป้งเป็นองค์ประกอบการควบคุมที่ลากได้บนแถบเลื่อนที่ ช่วยให้ผู้ใช้เลือกค่าเฉพาะภายในช่วงที่กำหนดโดย ติดตาม
- เครื่องหมายถูก: เครื่องหมายถูกคือเครื่องหมายหรือตัวบ่งชี้ที่มองเห็นได้ซึ่งไม่บังคับ จะปรากฏขึ้นตามแนวของแถบเลื่อน
การติดตั้งใช้งานขั้นพื้นฐาน
ดูคำจำกัดความ 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()) } }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
การติดตั้งใช้งานขั้นสูง
เมื่อใช้งานแถบเลื่อนที่ซับซ้อนมากขึ้น คุณยังสามารถใช้ พารามิเตอร์ต่อไปนี้
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()) } }
การติดตั้งใช้งานจะปรากฏดังนี้
แถบเลื่อนช่วง
หรือจะใช้คอมโพสิเบิล 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()) } }