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

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

תוצאה

סרגל אפליקציה דינמי בחלק העליון מציג את הטקסט &quot;נבחרו 3 פריטים&quot; עם סמל שיתוף. הטקסט והסמל האלה מופיעים רק כשבוחרים פריטים
איור 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) } מגדיר את הרכיב הקומפוזבילי AppBarSelectionActions כסרגל האפליקציה העליון. המשתמש AppBarSelectionActions מקבל את הסטטוס selectedItems.
  • ‫LazyColumn מציג את הפריטים ברשימה אנכית, ומעבד רק את הפריטים שגלויים במסך.
  • ‫ListItemSelectable מייצג פריט ברשימה שאפשר לבחור.
    • ‫combinedClickable מאפשר טיפול גם בקליק וגם בקליק ארוך לבחירת פריט. לחיצה מבצעת פעולה, ולחיצה ארוכה על פריט משנה את מצב הבחירה שלו.

תוצאה

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

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