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

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

תוצאה

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

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

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

תוצאה

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

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