פס הזזה

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

  • לשנות הגדרות שמשתמשות בטווח ערכים, כמו עוצמת קול ובהירות.
  • לסנן נתונים בתרשים, כמו כשמגדירים טווח מחירים.
  • קלט מהמשתמשים, כמו הגדרת דירוג בביקורת.

פס ההזזה מכיל מסלול, סמן, תווית ערך וסימני וי:

  • Track: הטראק הוא הסרגל האופקי שמייצג את טווח הערכים שאפשר לקבל בפס ההזזה.
  • אגודל: האגודל הוא רכיב בקרה שניתן לגרירה בפס ההזזה, שמאפשר למשתמש לבחור ערך ספציפי בטווח שמוגדר על ידי המסלול.
  • סימוני וי (V): סימוני וי הם סמנים או אינדיקטורים חזותיים אופציונליים שמופיעים לאורך המסלול של פס ההזזה.
פס הזזה עם סמן, מסלול וסימני וי.
איור 1. הטמעה של פס מחליק.

הטמעה בסיסית

להגדרה המלאה של ה-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

ההטמעה הזו נראית כך:

רכיב פס ההזזה עם ערך שנבחר בערך שלושה רבעים לאורך הטראק.
איור 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. פס הזזה עם שלבים וטווח ערכים מוגדר.

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

אפשר גם להשתמש בתוכן הקומפוזבילי הייעודי 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

רכיב של פס מחליק עם טווח שבו נבחרו שני ערכים. תווית שמציגה את הגבולות העליונים והתחתונים של הבחירה.
איור 4. הטמעה של פס גלילה של טווח.

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