شريط التمرير

تسمح عناصر 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())
    }
}
Slider.kt

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

عملية التنفيذ المتقدّمة

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

• ‫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

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

شريط تمرير النطاق

يمكنك أيضًا استخدام عنصر 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

مصادر إضافية

• مستندات واجهة Material UI