סרגל הודעות חטופות

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

ריכזנו כאן שלושה תרחישים לדוגמה שכדאי להשתמש בהם בסרגל התראות:

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

דוגמה בסיסית

כדי להטמיע סרגל התראות, קודם יוצרים SnackbarHost, שכולל מאפיין SnackbarHostState. ‫SnackbarHostState מספק גישה לפונקציה showSnackbar(), שבה אפשר להשתמש כדי להציג את סרגל ההתראות.

הפונקציה הזו דורשת CoroutineScope – כמו זו שמוחזרת על ידי rememberCoroutineScope – ואפשר לקרוא לה בתגובה לאירועים בממשק המשתמש כדי להציג Snackbar בתוך Scaffold.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}

סרגל פעולות עם פעולה

אפשר להוסיף פעולה אופציונלית ולשנות את משך הזמן של ה-Snackbar. הפונקציה snackbarHostState.showSnackbar() מקבלת פרמטרים נוספים של actionLabel ו-duration, ומחזירה SnackbarResult.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    val result = snackbarHostState
                        .showSnackbar(
                            message = "Snackbar",
                            actionLabel = "Action",
                            // Defaults to SnackbarDuration.Short
                            duration = SnackbarDuration.Indefinite
                        )
                    when (result) {
                        SnackbarResult.ActionPerformed -> {
                            /* Handle snackbar action performed */
                        }
                        SnackbarResult.Dismissed -> {
                            /* Handle snackbar dismissed */
                        }
                    }
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}

אפשר לספק Snackbar בהתאמה אישית באמצעות הפרמטר snackbarHost. מידע נוסף מופיע במאמרי העזרה של ה-API מבוסס-SnackbarHost.

נקודות עיקריות

  • ‫actionLabel = "Action": מגדיר את הטקסט של כפתור הפעולה.
  • ‫duration = SnackbarDuration.Indefinite: שומר על הצגת סרגל ההתראות עד שהמשתמש או התוכנית סוגרים אותו.
  • ‫SnackbarResult.ActionPerformed: מציין שהמשתמש לחץ על כפתור הפעולה של סרגל ההתראות.
  • ‫SnackbarResult.Dismissed: מציין שהמשתמש סגר את סרגל ההתראות בלי ללחוץ על כפתור הפעולה.