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

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

مصادر إضافية
- المادة 3: الأزرار المقسّمة