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

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