פס הזזה

הרכיב הניתן לTex-הרכבה 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())
    }
}

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

רכיב של פס הזזה עם ערך שנבחר בערך בשלושה רבעים לאורך הפס.
איור 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())
    }
}

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

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

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

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