استخدِم زرًا مقسّمًا للسماح للمستخدمين بالاختيار من بين مجموعة من الخيارات جنبًا إلى جنب. هناك نوعان من الأزرار المقسّمة:
- زر الاختيار الواحد: يتيح للمستخدمين تحديد خيار واحد.
- زر الاختيار المتعدّد: يتيح للمستخدمين اختيار ما بين عنصرَين وخمسة عناصر. بالنسبة إلى الخيارات الأكثر تعقيدًا أو التي تتضمّن أكثر من خمسة عناصر، استخدِم الشرائح.
مساحة عرض واجهة برمجة التطبيقات
استخدِم التنسيقَين 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. - يتم تعديل
onClickselectedIndexباستخدام فهرس الزر الذي تم النقر عليه. - يضبط
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( painter = rememberVectorPainter(AppIcons.DirectionsWalk), contentDescription = "Directions Walk" ) "Ride" -> Icon( painter = rememberVectorPainter(AppIcons.DirectionsBus), contentDescription = "Directions Bus" ) "Drive" -> Icon( painter = rememberVectorPainter(AppIcons.DirectionsCar), contentDescription = "Directions Car" ) } } ) } } }
نقاط رئيسية حول الرمز
- يبدأ الرمز المتغيّر
selectedOptionsباستخدامrememberوmutableStateListOf. يتتبّع هذا الخيار حالة كل زر تم اختياره. - يستخدم الرمز
MultiChoiceSegmentedButtonRowلاحتواء الأزرار. - داخل حلقة
forEachIndexed، ينشئ الرمزSegmentedButtonلكل خيار:- يحدّد
shapeشكل الزر استنادًا إلى فهرسه والعدد الإجمالي للخيارات. - يضبط
checkedحالة الزرّ على "تمّ التحقّق منه" استنادًا إلى القيمة المقابلة فيselectedOptions. - يؤدي النقر على الزر
onCheckedChangeإلى تبديل حالة اختيار العنصر المقابل فيselectedOptions. - يعرض
iconرمزًا استنادًا إلىSegmentedButtonDefaults.Iconوحالة الزر المحدَّدة. - يعرض
labelرمزًا يتوافق مع التصنيف، باستخدام دوالIconالمركّبة مع متجهات الصور وأوصاف المحتوى المناسبة.
- يحدّد
النتيجة
مراجع إضافية
- Material 3: الأزرار المقسَّمة