استخدِم زرًا مقسَّمًا للسماح للمستخدمين بالاختيار من مجموعة من الخيارات جنبًا إلى جنب. هناك نوعان من الأزرار المقسّمة:
- زر اختيار واحد: يتيح للمستخدمين اختيار خيار واحد.
- زر الاختيار المتعدد: يتيح للمستخدمين الاختيار بين عنصرين وخمسة عناصر. بالنسبة إلى الخيارات الأكثر تعقيدًا أو التي تتضمّن أكثر من خمسة عناصر، استخدِم الشرائح.

مساحة واجهة برمجة التطبيقات
استخدِم تنسيقات SingleChoiceSegmentedButtonRow
وMultiChoiceSegmentedButtonRow
لإنشاء أزرار مقسّمة. تحدّد هذه التصاميم موضع SegmentedButton
s وحجمها بشكل صحيح، وتتشارك المَعلمات الرئيسية التالية:
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: الأزرار المقسّمة