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

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

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

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

דוגמה בסיסית

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

הפונקציה להשהיה דורשת 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. מידע נוסף מופיע בSnackbarHostמאמרי העזרה של ה-API.

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

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