شريط التمرير

تتيح عنصر 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. تنفيذ شريط تمرير النطاق

مراجع إضافية