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

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

התוצאה

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

התוצאה

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

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