شريط التمرير

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

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

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

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

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

اطّلِع على مرجع 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())
    }
}
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. تمثّل هذه السمة شريط تمرير للنطاق.

مراجع إضافية