تسمح عناصر Slider
القابلة للإنشاء للمستخدمين بالاختيار من بين مجموعة من
القيم. يمكنك استخدام شريط تمرير للسماح للمستخدم بإجراء ما يلي:
- يمكنك ضبط الإعدادات التي تستخدم نطاقًا من القيم، مثل مستوى الصوت والسطوع.
- فلترة البيانات في رسم بياني، كما هو الحال عند ضبط نطاق سعر
- البيانات التي أدخلها المستخدم، مثل تحديد تقييم في مراجعة
يحتوي شريط التمرير على مسار وإبهام وتصنيف القيمة وعلامات التجزئة:
- المسار: المسار هو الشريط الأفقي الذي يمثل نطاق القيم التي يمكن أن يتخذها شريط التمرير.
- الإبهام: الإبهام هو عنصر تحكم قابل للسحب على شريط التمرير تتيح للمستخدم اختيار قيمة معينة ضمن النطاق الذي يحدده المسار الصحيح.
- علامات التجزئة: هي علامات أو مؤشرات مرئية اختيارية تظهر على طول مسار شريط التمرير.
التنفيذ الأساسي
يُرجى الاطّلاع على مرجع 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()) } }