شريط التمرير

يتيح عنصر 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