شريط التمرير

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

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

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

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

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

يُرجى الاطّلاع على مرجع Slider للحصول على تعريف كامل لواجهة برمجة التطبيقات. في ما يلي بعض الparameters الرئيسية للعنصر القابل للتجميع 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