פס הזזה

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

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

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

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

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

אפשר גם להשתמש ב-composable הייעודי של 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. הטמעה של פס גלילה של טווח.

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