استخدِم زرًا مقسَّمًا للسماح للمستخدمين بالاختيار من بين مجموعة من الخيارات جنبًا إلى جنب. هناك نوعان من الأزرار المقسَّمة:
- زر اختيار واحد: يسمح للمستخدمين باختيار خيار واحد.
- زر خيارات متعدّدة: يسمح للمستخدمين بالاختيار بين عنصرَين وخمسة عناصر. بالنسبة إلى الخيارات الأكثر تعقيدًا أو أكثر من خمسة عناصر، استخدِم الشرائح.
واجهة برمجة التطبيقات
استخدِم تنسيقَي SingleChoiceSegmentedButtonRow و
MultiChoiceSegmentedButtonRow لإنشاء أزرار مقسَّمة. يحدّد هذان
التنسيقان موضع SegmentedButtons وحجمه بشكلٍ صحيح،
ويتشاركان المَعلمات الرئيسية التالية:
space: يضبط التداخل بين الأزرار.content: يحتوي على محتوى صف الزر المقسَّم، والذي يكون عادةً تسلسلاً منSegmentedButton.
إنشاء زر مقسَّم يتيح اختيار واحد
يوضّح هذا المثال كيفية إنشاء زر مقسَّم يتيح اختيار واحد:
@Composable fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) { var selectedIndex by remember { mutableIntStateOf(0) } val options = listOf("Day", "Month", "Week") SingleChoiceSegmentedButtonRow { options.forEachIndexed { index, label -> SegmentedButton( shape = SegmentedButtonDefaults.itemShape( index = index, count = options.size ), onClick = { selectedIndex = index }, selected = index == selectedIndex, label = { Text(label) } ) } } }
نقاط أساسية حول الرمز
- تتم تهيئة متغيّر
selectedIndexباستخدامrememberوmutableIntStateOfلتتبُّع فهرس الزر الذي تم اختياره. - يتم تحديد قائمة
optionsالتي تمثّل تصنيفات الأزرار. - يسمح لك
SingleChoiceSegmentedButtonRowباختيار زر واحد فقط. - يتم إنشاء
SegmentedButtonلكل خيار داخل حلقةforEachIndexed:shapeيحدّد شكل الزر استنادًا إلى الفهرس وإجمالي عدد الخيارات باستخدامSegmentedButtonDefaults.itemShape.onClickتعدّلselectedIndexباستخدام فهرس الزر الذي تم النقر عليه.selectedتضبط حالة اختيار الزر استنادًا إلىselectedIndex.labelيعرض تصنيف الزر باستخدام العنصر المركّبText.
النتيجة
إنشاء زر مقسَّم يتيح خيارات متعدّدة
يوضّح هذا المثال كيفية إنشاء زر مقسَّم يتيح خيارات متعدّدة مع رموز تسمح للمستخدمين باختيار خيارات متعدّدة:
@Composable fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { val selectedOptions = remember { mutableStateListOf(false, false, false) } val options = listOf("Walk", "Ride", "Drive") MultiChoiceSegmentedButtonRow { options.forEachIndexed { index, label -> SegmentedButton( shape = SegmentedButtonDefaults.itemShape( index = index, count = options.size ), checked = selectedOptions[index], onCheckedChange = { selectedOptions[index] = !selectedOptions[index] }, icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) }, label = { when (label) { "Walk" -> Icon( imageVector = Icons.AutoMirrored.Filled.DirectionsWalk, contentDescription = "Directions Walk" ) "Ride" -> Icon( imageVector = Icons.Default.DirectionsBus, contentDescription = "Directions Bus" ) "Drive" -> Icon( imageVector = Icons.Default.DirectionsCar, contentDescription = "Directions Car" ) } } ) } } }
نقاط أساسية حول الرمز
- يهيّئ الرمز المتغيّر
selectedOptionsباستخدامrememberوmutableStateListOf. يتتبّع هذا المتغيّر الحالة المحدّدة لكل زر. - يستخدِم الرمز
MultiChoiceSegmentedButtonRowلاحتواء الأزرار. - داخل حلقة
forEachIndexed، ينشئ الرمزSegmentedButtonلكل خيار:shapeيحدّد شكل الزر استنادًا إلى الفهرس وإجمالي عدد الخيارات.checkedتضبط حالة تحديد الزر استنادًا إلى القيمة المقابلة فيselectedOptions.onCheckedChangeتبدّل الحالة المحدّدة للعنصر المقابل فيselectedOptionsعند النقر على الزر.iconيعرض رمزًا استنادًا إلىSegmentedButtonDefaults.Iconوحالة تحديد الزر.labelيعرض رمزًا يتطابق مع التصنيف باستخدام العناصر المركّبةIconمع متجهات الصور وأوصاف المحتوى المناسبة.
النتيجة
مراجع إضافية
- Material 3: الأزرار المقسَّمة