במדריך הזה מוסבר איך ליצור ב-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
holds the set of selected item indexes. - ב-
AppBarMultiSelectionExample
משתמשים בScaffold
כדי לבנות את המסך.-
topBar = { AppBarSelectionActions(selectedItems) }
מגדיר את הקומפוזבלAppBarSelectionActions
כסרגל האפליקציות העליון. המשתמשAppBarSelectionActions
יקבל את המצבselectedItems
.
-
-
LazyColumn
מציג את הפריטים ברשימה אנכית, ורק הפריטים שגלויים במסך מוצגים. -
ListItemSelectable
מייצג פריט ברשימה שאפשר לבחור.-
combinedClickable
מאפשרת טיפול בלחיצה ובלחיצה ארוכה לבחירת פריטים. קליק מבצע פעולה, בעוד שלחיצה ארוכה על פריט משנה את מצב הבחירה שלו.
-
התוצאה
