יצירת שורת אפליקציה דינמית בחלק העליון

במדריך הזה מוסבר איך ליצור סרגל אפליקציה דינמי בחלק העליון של 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"
                    )
                }
            }
        },
    )
}
AppBar.kt

נקודות עיקריות לגבי הקוד

• AppBarSelectionActions מקבלת Set של אינדקסים של פריטים שנבחרו.
• הערך של topBarText משתנה בהתאם לפריטים שבחרתם.
  • כשבוחרים פריטים, מופיע טקסט שמתאר את מספר הפריטים שנבחרו בTopAppBar.
  • אם לא בוחרים פריטים, הערך של topBarText הוא 'רשימת פריטים'.
• הבלוק actions מגדיר את הפעולות שיוצגו בסרגל האפליקציות העליון. אם הערך של hasSelection הוא True, יופיע סמל שיתוף אחרי הטקסט.
• פונקציית הלמה onClick של IconButton מטפלת בפעולה של השיתוף כשאתם לוחצים על הסמל.

התוצאה

איור 1. סרגל אפליקציות דינמי בחלק העליון עם טקסט וסמל שיתוף שמופיעים רק כשנבחרים פריטים.

שילוב רשימה של פריטים שאפשר לבחור בסרגל האפליקציה העליון הדינמי

בדוגמה הזו מוסבר איך להוסיף רשימה לבחירה לסרגל האפליקציות העליון הדינמי:

@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
                            }
                        )
                )
            }
        }
    }
}
AppBar.kt

נקודות עיקריות לגבי הקוד

• הסרגל העליון מתעדכן בהתאם למספר הפריטים ברשימה שבחרתם.
• selectedItems מכיל את קבוצת האינדקסים של הפריטים שנבחרו.
• ב-AppBarMultiSelectionExample נעשה שימוש ב-Scaffold כדי ליצור מבנה למסך.
  • topBar = { AppBarSelectionActions(selectedItems) } מגדיר את הרכיב הקומפוזבילי AppBarSelectionActions כסרגל האפליקציות העליון. המשתמש AppBarSelectionActions מקבל את המצב selectedItems.
• LazyColumn מציג את הפריטים ברשימה אנכית, ומרינדר רק את הפריטים שגלויים במסך.
• ListItemSelectable מייצג פריט ברשימה שאפשר לבחור.
  • combinedClickable מאפשרת טיפול גם בלחיצה וגם בלחיצה ארוכה לבחירת פריטים. לחיצה מבצעת פעולה, בעוד שלחיצה ארוכה על פריט משנה את מצב הבחירה שלו.

התוצאה

איור 2. רשימה שמשולבת בסרגל האפליקציות העליון הדינמי, עם פריטים ספציפיים שנבחרו.

מקורות מידע נוספים

• TopAppBar
• LazyColumn
• Scaffold