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

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

הטמעת התנהגות דינמית של סרגל האפליקציה העליון

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

@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"
                    )
                }
            }
        },
    )
}
AppBar.kt

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

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