شريط التمرير

يسمح العنصر Slider القابل للإنشاء للمستخدمين بالاختيار من نطاق من القيم. يمكنك استخدام شريط تمرير للسماح للمستخدم بما يلي:

  • ضبط الإعدادات التي تستخدم نطاقًا من القيم، مثل مستوى الصوت والسطوع.
  • فلترة البيانات في رسم بياني، كما هو الحال عند ضبط نطاق أسعار.
  • إدخال قيم، مثل تحديد تقييم في مراجعة

يحتوي شريط التمرير على مسار ومقبض وتصنيف للقيمة وعلامات التحديد:

  • المسار: هو الشريط الأفقي الذي يمثّل نطاق القيم التي يمكن أن يتخذها شريط التمرير.
  • المقبض: عنصر تحكّم قابل للسحب على شريط التمرير يتيح للمستخدم تحديد قيمة معينة ضمن نطاق المسار.
  • علامات التحديد: مؤشرات أو علامات مرئية اختيارية تظهر على طول مسار شريط التمرير.
.شريط تمرير يحتوي على المقبض والمسار وعلامات التحديد
الشكل 1. مثال يوضّح تنفيذ شريط تمرير.

التنفيذ الأساسي

راجِع مرجع Slider للاطّلاع على تعريف كامل لواجهة برمجة التطبيقات. في ما يلي بعض المعلمات الرئيسية للعنصر Slider القابل للإنشاء:

  • 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())
    }
}
Slider.kt

يظهر هذا التنفيذ على النحو التالي:

مكوّن شريط تمرير تم تحديد قيمة فيه عند ثلاثة أرباع المسار تقريبًا
الشكل 2. تنفيذ أساسي لشريط تمرير

التنفيذ المتقدِّم

عند تنفيذ شريط تمرير أكثر تعقيدًا، يمكنك بالإضافة إلى ذلك استخدام المعلمات التالية.

  • 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())
    }
}
Slider.kt

يظهر التنفيذ على النحو التالي:

شريط تمرير منفصل يتراوح بين 0 و50، ويعرض خمس علامات على فواصل زمنية متساوية يقع زر التحكّم بالقرب من علامة التدريج الثانية، مشيرًا إلى اختيار قيمة مقدارها 16.
الشكل 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. مثال يوضّح تنفيذ شريط تمرير للنطاق

مراجع إضافية