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