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

במדריך הזה מוסבר איך ליצור ב-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
    )
}
AppBar.kt

מידע חשוב על הקוד

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

מידע חשוב על הקוד

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

התוצאה

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

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

• TopAppBar
• LazyColumn
• Scaffold