Slider
composable به کاربران این امکان را می دهد که از طیف وسیعی از مقادیر انتخاب کنند. ممکن است از یک نوار لغزنده استفاده کنید تا به کاربر اجازه دهید کارهای زیر را انجام دهد:
- تنظیماتی را تنظیم کنید که از طیف وسیعی از مقادیر مانند حجم صدا و روشنایی استفاده می کنند.
- مانند هنگام تنظیم محدوده قیمت، داده ها را در یک نمودار فیلتر کنید.
- ورودی کاربر، مانند تعیین رتبه در یک بررسی.
نوار لغزنده حاوی یک آهنگ، انگشت شست، برچسب مقدار و علامت های تیک است:
- Track : مسیر نوار افقی است که نشان دهنده محدوده مقادیری است که لغزنده می تواند بگیرد.
- Thumb : انگشت شست یک عنصر کنترلی قابل کشیدن روی نوار لغزنده است که به کاربر اجازه می دهد مقدار خاصی را در محدوده تعریف شده توسط مسیر انتخاب کند.
- علامتهای تیک : علامتهای تیک نشانگرها یا نشانگرهای تصویری اختیاری هستند که در امتداد مسیر نوار لغزنده ظاهر میشوند.
![یک نوار لغزنده با علائم انگشت شست، آهنگ و تیک.](https://developer.android.com/static/develop/ui/compose/images/components/slider.png?authuser=2&hl=fa)
پیاده سازی اساسی
برای تعریف کامل API به مرجع Slider
مراجعه کنید. برخی از پارامترهای کلیدی برای Slider
composable به شرح زیر است:
-
value
: مقدار فعلی اسلایدر. -
onValueChange
: یک لامبدا که هر بار که مقدار تغییر می کند، فراخوانی می شود. -
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()) } }
این پیاده سازی به صورت زیر ظاهر می شود:
![یک جزء لغزنده با مقدار تقریباً سه چهارم در طول مسیر انتخاب شده است.](https://developer.android.com/static/develop/ui/compose/images/components/slider-basic.png?authuser=2&hl=fa)
پیاده سازی پیشرفته
هنگام اجرای یک نوار لغزنده پیچیده تر، می توانید از پارامترهای زیر نیز استفاده کنید.
-
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()) } }
پیاده سازی به صورت زیر ظاهر می شود:
![متن جایگزین خود را اینجا بنویسید](https://developer.android.com/static/develop/ui/compose/images/components/slider-advanced.png?authuser=2&hl=fa)
لغزنده برد
همچنین می توانید از RangeSlider
اختصاصی composable استفاده کنید. این به کاربر اجازه می دهد تا دو مقدار را انتخاب کند. این می تواند در مواردی مانند زمانی که کاربر می خواهد حداقل و حداکثر قیمت را انتخاب کند، مفید باشد.
مثال زیر یک مثال نسبتاً ساده از لغزنده دامنه پیوسته است.
@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()) } }
![یک جزء لغزنده محدوده با دو مقدار انتخاب شده است. یک برچسب کران های بالا و پایین انتخاب را نشان می دهد.](https://developer.android.com/static/develop/ui/compose/images/components/slider-range.png?authuser=2&hl=fa)