يوضّح هذا الدليل كيفية إنشاء شريط تطبيق علوي ديناميكي في Compose يغيّر خياراته عند اختيار عناصر من القائمة. يمكنك تعديل عنوان شريط التطبيق العلوي والإجراءات استنادًا إلى حالة التحديد.
تنفيذ سلوك شريط التطبيق العلوي الديناميكي
يحدّد هذا الرمز دالة قابلة للإنشاء لشريط التطبيق العلوي تتغيّر استنادًا إلى اختيار العنصر:
@Composable fun AppBarSelectionActions( selectedItems: Set<Int>, modifier: Modifier = Modifier, ) { val hasSelection = selectedItems.isNotEmpty() val topBarText = 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" ) } } }, ) }
النقاط الرئيسية حول الرمز
- يقبل
AppBarSelectionActions
Set
لفهارس العناصر المحدّدة. - يتغيّر
topBarText
حسب ما إذا كنت قد اخترت أي عناصر.- عند اختيار عناصر، يظهر نص يصف عدد العناصر المحدّدة في
TopAppBar
. - إذا لم تحدّد أي عناصر، ستكون
topBarText
هي "قائمة العناصر".
- عند اختيار عناصر، يظهر نص يصف عدد العناصر المحدّدة في
- يحدّد البلوك
actions
الإجراءات التي تعرضها في شريط التطبيق العلوي. إذا كانت قيمةhasSelection
هي true، سيظهر رمز المشاركة بعد النص. - يتعامل
onClick
lambda الخاص بـIconButton
مع إجراء المشاركة عند النقر على الرمز.
النتيجة

دمج قائمة قابلة للاختيار في شريط التطبيق العلوي الديناميكي
يوضّح هذا المثال كيفية إضافة قائمة قابلة للتحديد إلى شريط تطبيق علوي ديناميكي:
@Composable private fun AppBarMultiSelectionExample( modifier: Modifier = Modifier, ) { val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) } var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) } Scaffold( topBar = { AppBarSelectionActions(selectedItems) } ) { innerPadding -> LazyColumn(contentPadding = innerPadding) { itemsIndexed(listItems) { _, index -> val isItemSelected = selectedItems.contains(index) ListItemSelectable( selected = isItemSelected, Modifier .combinedClickable( interactionSource = remember { MutableInteractionSource() }, indication = null, onClick = { /* click action */ }, onLongClick = { if (isItemSelected) selectedItems -= index else selectedItems += index } ) ) } } } }
النقاط الرئيسية حول الرمز
- يتم تعديل الشريط العلوي استنادًا إلى عدد عناصر القائمة التي تختارها.
- يحتوي
selectedItems
على مجموعة فهارس العناصر المحدّدة. - تستخدم
AppBarMultiSelectionExample
Scaffold
لتنظيم الشاشة.- يضبط
topBar = { AppBarSelectionActions(selectedItems) }
العنصر القابل للإنشاءAppBarSelectionActions
كشريط التطبيق العلوي. يتلقّىAppBarSelectionActions
حالةselectedItems
.
- يضبط
- تعرض
LazyColumn
العناصر في قائمة عمودية، ولا تعرض سوى العناصر المرئية على الشاشة. - يمثّل
ListItemSelectable
عنصر قائمة قابلاً للاختيار.- تسمح السمة
combinedClickable
بالتعامل مع كل من النقر والنقر مع الاستمرار لاختيار العناصر. يؤدي النقر إلى تنفيذ إجراء، بينما يؤدي النقر مع الاستمرار على عنصر إلى تبديل حالة اختياره.
- تسمح السمة
النتيجة
