פס הזזה

הרכיב הניתן לקישור 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. הטמעה בסיסית של פס הזזה.

הטמעה מתקדמת

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

  • 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

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

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

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