หน้านี้ได้รับการแปลโดย Cloud Translation API

Slider

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

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

แถบเลื่อนจะประกอบด้วยแทร็ก "นิ้วหัวแม่มือ" ป้ายกำกับค่า และเครื่องหมายถูก

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

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

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

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

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

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

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

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

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

ข้อมูลโค้ดต่อไปนี้ใช้แถบเลื่อนที่มีสามขั้นตอน พร้อมด้วยช่วง จาก 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** แถบเลื่อนที่มีจำนวนก้าวและช่วงค่าที่กำหนดไว้

แถบเลื่อนสำหรับช่วง

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

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

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

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