یک نوار لغزنده برای محدوده ای از مقادیر ایجاد کنید
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
Slider composable به کاربران این امکان را می دهد که از طیف وسیعی از مقادیر انتخاب کنند. ممکن است از یک نوار لغزنده استفاده کنید تا به کاربر اجازه دهید کارهای زیر را انجام دهد:
تنظیماتی را تنظیم کنید که از طیف وسیعی از مقادیر مانند حجم صدا و روشنایی استفاده می کنند.
مانند هنگام تنظیم محدوده قیمت، داده ها را در یک نمودار فیلتر کنید.
ورودی کاربر، مانند تعیین رتبه در یک بررسی.
نوار لغزنده حاوی یک آهنگ، انگشت شست، برچسب مقدار و علامت های تیک است:
Track : مسیر نوار افقی است که نشان دهنده محدوده مقادیری است که لغزنده می تواند بگیرد.
Thumb : انگشت شست یک عنصر کنترلی قابل کشیدن روی نوار لغزنده است که به کاربر اجازه می دهد مقدار خاصی را در محدوده تعریف شده توسط مسیر انتخاب کند.
علامتهای تیک : علامتهای تیک نشانگرها یا نشانگرهای تصویری اختیاری هستند که در امتداد مسیر نوار لغزنده ظاهر میشوند.
این موضوع پیاده سازی های اسلایدر زیر را نشان می دهد:
این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.
وابستگی ها
یک نوار لغزنده اولیه ایجاد کنید
مثال زیر یک نوار لغزنده ساده است. که به کاربر امکان می دهد مقداری از 0.0 تا 1.0 را انتخاب کند. از آنجا که کاربر می تواند هر مقداری را در آن محدوده انتخاب کند، لغزنده پیوسته است.
نتایج
شکل 1. اجرای اساسی یک نوار لغزنده.
یک اسلایدر پیشرفته ایجاد کنید
قطعه زیر یک نوار لغزنده را پیاده سازی می کند که دارای سه مرحله با محدوده 0.0 تا 50.0 است. از آنجا که انگشت شست به هر مرحله میچسبد، این لغزنده گسسته است.
نتایج
شکل 2. یک نوار لغزنده با مراحل و محدوده مقدار تنظیم شده.
لغزنده برد
همچنین می توانید از RangeSlider اختصاصی composable استفاده کنید. این به کاربر اجازه می دهد تا دو مقدار را انتخاب کند. این می تواند در مواردی مانند زمانی که کاربر می خواهد حداقل و حداکثر قیمت را انتخاب کند، مفید باشد.
مثال زیر یک مثال نسبتاً ساده از لغزنده دامنه پیوسته است:
نتایج
شکل 3. اجرای یک نوار لغزنده محدوده.
نکات کلیدی
برای تعریف کامل API به مرجع Slider مراجعه کنید. برخی از پارامترهای کلیدی برای Slider composable به شرح زیر است:
value : مقدار فعلی اسلایدر.
onValueChange : یک لامبدا که هر بار که مقدار تغییر می کند، فراخوانی می شود.
enabled : یک مقدار بولی که نشان می دهد کاربر می تواند با لغزنده تعامل داشته باشد یا خیر.
هنگام اجرای یک نوار لغزنده پیچیده تر، می توانید از پارامترهای زیر نیز استفاده کنید.
colors : نمونهای از SliderColors که به شما امکان میدهد رنگهای لغزنده را کنترل کنید.
valueRange : محدوده مقادیری که اسلایدر می تواند بگیرد.
steps : تعداد بریدگیهای روی نوار لغزندهای که انگشت شست به آن میچسبد.
همچنین میتوانید برای شخصیسازی کاملتر ظاهر مؤلفه، یک thumb و track قابل تنظیم را به Slider ارسال کنید.
مجموعه هایی که حاوی این راهنما هستند
این راهنما بخشی از مجموعههای راهنمای Quick Guide است که اهداف توسعه Android گستردهتری را پوشش میدهد:
نمایش اجزای تعاملی
بیاموزید که چگونه توابع ترکیبپذیر میتوانند به شما کمک کنند تا به راحتی اجزای رابط کاربری زیبا را بر اساس سیستم طراحی مواد طراحی کنید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-02-06 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-02-06 بهوقت ساعت هماهنگ جهانی."],[],[],null,["\u003cbr /\u003e\n\nThe [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) composable lets users make selections from a range of\nvalues. You might use a slider to let the user do the following:\n\n- Adjust settings that use a range of values, such as volume, and brightness.\n- Filter data in a graph, as when setting a price range.\n- User input, like setting a rating in a review.\n\nThe slider contains a track, thumb, value label, and tick marks:\n\n- **Track**: The track is the horizontal bar that represents the range of values the slider can take.\n- **Thumb**: The thumb is a draggable control element on the slider that allows the user to select a specific value within the range defined by the track.\n- **Tick marks**: Tick marks are optional visual markers or indicators that appear along the track of the slider.\n\nThis topic shows the following slider implementations:\n\n- [Basic](#basic-implementation)\n- [Advanced](#advanced-implementation)\n- [Range](#range-slider)\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate a basic slider\n\nThe following example is a straightforward slider. That allows the user to\nselect a value from `0.0` to `1.0`. Because the user can select any value in\nthat range, the slider is *continuous*.\n\nResults **Figure 1.** A basic implementation of a slider.\n\nCreate an advanced slider\n\nThe following snippet implements a slider that has three steps, with a range\nfrom `0.0` to `50.0`. Because the thumb snaps to each step, this slider is\n*discrete*.\n\nResults **Figure 2.** A slider with steps and a set value range. **Note:** The very beginning and end of a slider count as \"steps\". In the preceding example where the range is `0f..50f` and the number of `steps` is `3`, each interval along the range is `12.5` because the beginning and end of the slider are also intervals the user can select.\n\nRange slider\n\nYou can also use the dedicated [`RangeSlider`](/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)) composable. This allows the user to\nselect two values. This can be useful in cases such as when the user wishes to\nselect a minimum and maximum price.\n\nThe following example is a relatively straightforward example of a continuous\nrange slider:\n\nResults **Figure 3.** An implementation of a range slider.\n\nKey points\n\nSee the [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) reference for a full API definition. Some of the key\nparameters for the `Slider` composable are the following:\n\n- **`value`**: The current value of the slider.\n- **`onValueChange`**: A lambda that gets called every time the value is changed.\n- **`enabled`**: A boolean value that indicates if the user can interact with the slider.\n\nWhen implementing a more complex slider, you can additionally make use of the\nfollowing parameters.\n\n- **`colors`** : An instance of `SliderColors` that lets you control the colors of the slider.\n- **`valueRange`**: The range of values that the slider can take.\n- **`steps`**: The number of notches on the slider to which the thumb snaps.\n\nYou can also pass `Slider` a `thumb` and `track` composable to more\nthoroughly customize the appearance of the component.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]