شريط التمرير

تتيح العناصر القابلة للتجميع 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