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

במדריך הזה מוסבר איך ליצור ב-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 מטפלת בפעולת השיתוף כשלוחצים על הסמל.

התוצאה

סרגל אפליקציות דינמי בחלק העליון של המסך מציג את הטקסט &#39;נבחרו 3 פריטים&#39; עם סמל שיתוף. הטקסט והסמל האלה מופיעים רק כשבוחרים פריטים
איור 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
                            }
                        )
                )
            }
        }
    }
}

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

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

התוצאה

סרגל אפליקציות דינמי עליון מציג את הטקסט &#39;נבחרו 3 פריטים&#39;, ואחריו סמל שיתוף. למטה, ברשימה מוצגים כמה פריטים, עם סימני וי לצד שלושת הפריטים שנבחרו
איור 2. רשימה שמשולבת בסרגל אפליקציות דינמי עליון עם פריטים ספציפיים שנבחרו.

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