פס הזזה

רכיב ה-Composable‏ Slider מאפשר למשתמשים לבחור מתוך טווח של ערכים. אפשר להשתמש בפס הזזה כדי לאפשר למשתמשים:

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

רכיב ה-Slider מכיל פס, נקודת אחיזה, תווית ערך וסימני חלוקה:

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

הטמעה בסיסית

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

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

רכיב של פס הזזה עם ערך שנבחר בערך בשלושת הרבעים של הפס.
איור 2. הטמעה בסיסית של פס הזזה.

הטמעה מתקדמת

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

  • ‫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

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

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

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