شريط التمرير

تسمح عناصر 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

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

اكتب النص البديل هنا
الشكل 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. هو تنفيذ لشريط تمرير النطاق.

مصادر إضافية