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