פס הזזה

התוכן הקומפוזבילי 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())
    }
}
Slider.kt

היישום הזה נראה כך:

הטמעה מתקדמת

כשמטמיעים פס הזזה מורכב, אפשר גם להשתמש את הפרמטרים הבאים.

• colors: מופע של SliderColors שמאפשר לשלוט הצבעים של פס ההזזה.
• valueRange: טווח הערכים שניתן להזין בפס ההזזה.
• steps: מספר החריצים בפס ההזזה שאליהם מוצמדת האגודל.

קטע הקוד הבא מיישם מחוון שמורכב משלושה שלבים, עם טווח מ-0.0 עד 50.0. מכיוון שהאגודל נצמד לכל שלב, המחוון הזה discrete.

@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

ההטמעה תיראה כך:

פס הזזה של טווח

אפשר גם להשתמש בתוכן הקומפוזבילי הייעודי RangeSlider. כך המשתמש יכול צריך לבחור שני ערכים. האפשרות הזו יכולה להיות שימושית במקרים שבהם המשתמש רוצה לבחור מחיר מינימום ומקסימום.

הדוגמה הבאה היא דוגמה ישירה יחסית של רצף פס הזזה של טווח.

@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

מקורות מידע נוספים

• מסמכי ממשק המשתמש של Material