تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
استخدِم زرًا مقسَّمًا للسماح للمستخدمين بالاختيار من مجموعة من الخيارات جنبًا إلى جنب.
هناك نوعان من الأزرار المقسّمة:
زر اختيار واحد: يتيح للمستخدمين اختيار خيار واحد.
زر الاختيار المتعدد: يتيح للمستخدمين الاختيار بين عنصرين وخمسة عناصر. بالنسبة إلى الخيارات الأكثر تعقيدًا أو التي تتضمّن أكثر من خمسة عناصر، استخدِم الشرائح.
الشكل 1. زر اختيار واحد (1) وزر خيارات متعدّدة (2)
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["Use a segmented button to let users choose from a set of options, side-by-side.\nThere are two types of segmented buttons:\n\n- **Single-select button**: Lets users choose one option.\n- **Multi-select button** : Lets users choose between two and five items. For more complex choices, or more than five items, use [chips](/develop/ui/compose/components/chip).\n\n**Figure 1.** A single-select button (1) and a multi-select button (2).\n\nAPI surface\n\nUse the [`SingleChoiceSegmentedButtonRow`](/reference/kotlin/androidx/compose/material3/package-summary#SingleChoiceSegmentedButtonRow(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,kotlin.Function1)) and\n[`MultiChoiceSegmentedButtonRow`](/reference/kotlin/androidx/compose/material3/package-summary#MultiChoiceSegmentedButtonRow(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,kotlin.Function1)) layouts to create segmented buttons. These\nlayouts position and size [`SegmentedButton`s](/reference/kotlin/androidx/compose/material3/package-summary#(androidx.compose.material3.MultiChoiceSegmentedButtonRowScope).SegmentedButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.Shape,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SegmentedButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.Function0)) correctly,\nand share the following key parameters:\n\n- `space`: Adjusts the overlap between the buttons.\n- `content`: Contains the content of the segmented button row, which is typically a sequence of `SegmentedButton`s.\n\nCreate a single-select segmented button\n\nThis example shows how to create a single-select segmented button:\n\n\n```kotlin\n@Composable\nfun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {\n var selectedIndex by remember { mutableIntStateOf(0) }\n val options = listOf(\"Day\", \"Month\", \"Week\")\n\n SingleChoiceSegmentedButtonRow {\n options.forEachIndexed { index, label -\u003e\n SegmentedButton(\n shape = SegmentedButtonDefaults.itemShape(\n index = index,\n count = options.size\n ),\n onClick = { selectedIndex = index },\n selected = index == selectedIndex,\n label = { Text(label) }\n )\n }\n }\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt#L63-L81\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- Initializes a `selectedIndex` variable using `remember` and `mutableIntStateOf` to track the selected button index.\n- Defines a list of `options` representing the button labels.\n- `SingleChoiceSegmentedButtonRow` lets you select only one button.\n- Creates a `SegmentedButton` for each option, inside the `forEachIndexed` loop:\n - `shape` defines the button's shape based on its index and the total count of options using `SegmentedButtonDefaults.itemShape`.\n - `onClick` updates `selectedIndex` with the clicked button's index.\n - `selected` sets the button's selection state based on `selectedIndex`.\n - `label` displays the button label using the `Text` composable.\n\nResult **Figure 2.** A single-select button with one option picked.\n\nCreate a multi-select segmented button\n\nThis example shows how to create a multi-choice segmented button with icons that\nlets users select multiple options:\n\n\n```kotlin\n@Composable\nfun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {\n val selectedOptions = remember {\n mutableStateListOf(false, false, false)\n }\n val options = listOf(\"Walk\", \"Ride\", \"Drive\")\n\n MultiChoiceSegmentedButtonRow {\n options.forEachIndexed { index, label -\u003e\n SegmentedButton(\n shape = SegmentedButtonDefaults.itemShape(\n index = index,\n count = options.size\n ),\n checked = selectedOptions[index],\n onCheckedChange = {\n selectedOptions[index] = !selectedOptions[index]\n },\n icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },\n label = {\n when (label) {\n \"Walk\" -\u003e Icon(\n imageVector =\n Icons.AutoMirrored.Filled.DirectionsWalk,\n contentDescription = \"Directions Walk\"\n )\n \"Ride\" -\u003e Icon(\n imageVector =\n Icons.Default.DirectionsBus,\n contentDescription = \"Directions Bus\"\n )\n \"Drive\" -\u003e Icon(\n imageVector =\n Icons.Default.DirectionsCar,\n contentDescription = \"Directions Car\"\n )\n }\n }\n )\n }\n }\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt#L91-L132\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The code initializes the `selectedOptions` variable using `remember` and `mutableStateListOf`. This tracks the selected state of each button.\n- The code uses `MultiChoiceSegmentedButtonRow` to contain the buttons.\n- Inside the `forEachIndexed` loop, the code creates a `SegmentedButton` for each option:\n - `shape` defines the button's shape based on its index and the total count of options.\n - `checked` sets the button's checked state based on the corresponding value in `selectedOptions`.\n - `onCheckedChange` toggles the selected state of the corresponding item in `selectedOptions` when the button is clicked.\n - `icon` displays an icon based on `SegmentedButtonDefaults.Icon` and the button's checked state.\n - `label` displays an icon corresponding to the label, using `Icon` composables with appropriate image vectors and content descriptions.\n\nResult **Figure 3.** A multi-select segmented button with two options picked.\n\nAdditional resources\n\n- Material 3: [Segmented buttons](https://m3.material.io/components/segmented-buttons/overview)"]]