במדריך הזה מוסבר איך ליצור סרגל אפליקציה עליון דינמי ב-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" ) } } }, modifier = modifier ) }
מידע חשוב על הקוד
- הפונקציה
AppBarSelectionActionsמקבלתSetשל אינדקסים של פריטים שנבחרו. - הסמל
topBarTextמשתנה בהתאם לפריטים שנבחרו.- כשבוחרים פריטים, טקסט שמתאר את מספר הפריטים שנבחרו מופיע ב
TopAppBar. - אם לא בוחרים פריטים, הערך של
topBarTextהוא "רשימת פריטים".
- כשבוחרים פריטים, טקסט שמתאר את מספר הפריטים שנבחרו מופיע ב
- הבלוק
actionsמגדיר את הפעולות שמוצגות בסרגל האפליקציה העליון. אם הערך שלhasSelectionהוא True, סמל השיתוף מופיע אחרי הטקסט. - ה-lambda של
onClickב-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( modifier = modifier, 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מאפשר טיפול גם בקליק וגם בקליק ארוך לבחירת פריט. לחיצה מבצעת פעולה, ולחיצה ארוכה על פריט משנה את מצב הבחירה שלו.
-
תוצאה