تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يوضّح هذا الدليل كيفية إنشاء شريط تطبيق علوي ديناميكي في Compose يغيّر خياراته عند اختيار عناصر من القائمة. يمكنك تعديل عنوان شريط التطبيق العلوي والإجراءات استنادًا إلى حالة التحديد.
تنفيذ سلوك شريط التطبيق العلوي الديناميكي
يحدّد هذا الرمز دالة قابلة للإنشاء لشريط التطبيق العلوي تتغيّر استنادًا إلى اختيار العنصر:
@ComposablefunAppBarSelectionActions(selectedItems:Set<Int>,modifier:Modifier=Modifier,){valhasSelection=selectedItems.isNotEmpty()valtopBarText=if(hasSelection){"Selected ${selectedItems.size} items"}else{"List of items"}TopAppBar(title={Text(topBarText)},colors=TopAppBarDefaults.topAppBarColors(containerColor=MaterialTheme.colorScheme.primaryContainer,titleContentColor=MaterialTheme.colorScheme.primary,),actions={if(hasSelection){IconButton(onClick={/* click action */}){Icon(imageVector=Icons.Filled.Share,contentDescription="Share items")}}},)}
تعرض LazyColumn العناصر في قائمة عمودية، ولا تعرض سوى العناصر المرئية على الشاشة.
يمثّل ListItemSelectable عنصر قائمة قابلاً للاختيار.
تسمح السمة combinedClickable بالتعامل مع كل من النقر والنقر مع الاستمرار لاختيار العناصر. يؤدي النقر إلى تنفيذ إجراء، بينما يؤدي النقر مع الاستمرار على عنصر إلى تبديل حالة اختياره.
النتيجة
الشكل 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,["This guide explains how to create a dynamic top app bar in Compose that changes\nits options when items are selected from the list. You can modify the top app\nbar's title and actions based on the selection state.\n\nImplement dynamic top app bar behavior\n\nThis code defines a composable function for the top app bar that changes based\non item selection:\n\n\n```kotlin\n@Composable\nfun AppBarSelectionActions(\n selectedItems: Set\u003cInt\u003e,\n modifier: Modifier = Modifier,\n) {\n val hasSelection = selectedItems.isNotEmpty()\n val topBarText = if (hasSelection) {\n \"Selected ${selectedItems.size} items\"\n } else {\n \"List of items\"\n }\n\n TopAppBar(\n title = {\n Text(topBarText)\n },\n colors = TopAppBarDefaults.topAppBarColors(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n titleContentColor = MaterialTheme.colorScheme.primary,\n ),\n actions = {\n if (hasSelection) {\n IconButton(onClick = {\n /* click action */\n }) {\n Icon(\n imageVector = Icons.Filled.Share,\n contentDescription = \"Share items\"\n )\n }\n }\n },\n )\n}https://github.com/android/snippets/blob/e4396f6dd13aaa8099c4baa671cdd549a10f201c/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt#L402-L435\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- `AppBarSelectionActions` accepts a `Set` of selected item indexes.\n- The `topBarText` changes depending on whether you select any items.\n - When you select items, text describing the number of items selected appears in the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)).\n - If you don't select any items, the `topBarText` is \"List of items\".\n- The `actions` block defines the actions you display in the top app bar. If `hasSelection` is true, a share icon appears after the text.\n- The `onClick` lambda of the [`IconButton`](/reference/kotlin/androidx/compose/material3/package-summary#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.IconButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,kotlin.Function0)) handles the share action when you click the icon.\n\nResult **Figure 1.** A dynamic top app bar with text and a share icon that only appear when items are selected.\n\nIntegrate selectable list into dynamic top app bar\n\nThis example demonstrates how to add a selectable list to a dynamic top app bar:\n\n\n```kotlin\n@Composable\nprivate fun AppBarMultiSelectionExample(\n modifier: Modifier = Modifier,\n) {\n val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }\n var selectedItems by rememberSaveable { mutableStateOf(setOf\u003cInt\u003e()) }\n\n Scaffold(\n topBar = { AppBarSelectionActions(selectedItems) }\n ) { innerPadding -\u003e\n LazyColumn(contentPadding = innerPadding) {\n itemsIndexed(listItems) { _, index -\u003e\n val isItemSelected = selectedItems.contains(index)\n ListItemSelectable(\n selected = isItemSelected,\n Modifier\n .combinedClickable(\n interactionSource = remember { MutableInteractionSource() },\n indication = null,\n onClick = {\n /* click action */\n },\n onLongClick = {\n if (isItemSelected) selectedItems -= index else selectedItems += index\n }\n )\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/e4396f6dd13aaa8099c4baa671cdd549a10f201c/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt#L449-L479\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\n- The top bar updates based on how many list items you select.\n- `selectedItems` holds the set of selected item indexes.\n- `AppBarMultiSelectionExample` uses a [`Scaffold`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to structure the screen.\n - `topBar = { AppBarSelectionActions(selectedItems) }` sets the `AppBarSelectionActions` composable as the top app bar. `AppBarSelectionActions` receives the `selectedItems` state.\n- [`LazyColumn`](/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Function1)) displays the items in a vertical list, rendering only the items visible on the screen.\n- `ListItemSelectable` represents a selectable list item.\n - [`combinedClickable`](/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).combinedClickable(androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function0)) allows both click and long-click handling for item selection. A click performs an action, while long-clicking an item toggles its selection state.\n\nResult **Figure 2.** A list integrated into a dynamic top app bar with specific items selected.\n\nAdditional resources\n\n- [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior))\n- [`LazyColumn`](/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Function1))\n- [`Scaffold`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1))"]]