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

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

הנה שלושה תרחישים לדוגמה שבהם כדאי להשתמש בחטיף:

  • אישור פעולה: אחרי שמשתמש מוחק אימייל או הודעה, מופיעה הודעה קצרה כדי לאשר את הפעולה ומוצעת האפשרות 'ביטול'.
  • סטטוס הרשת: כשהחיבור לאינטרנט של האפליקציה מתנתק, מופיעה הודעה קצרה שמודיעה שהאפליקציה במצב אופליין.
  • שליחת נתונים: אחרי שליחת טופס או עדכון הגדרות, מוצגת הודעה קצרה שמאשרת שהשינוי נשמר בהצלחה.
דוגמאות לרכיבי ממשק משתמש של סנאקבר.
איור 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
}
MaterialLayoutSnippets.kt

חטיף עם פעולה

אפשר לספק פעולה אופציונלית ולשנות את משך הזמן של 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
}
MaterialLayoutSnippets.kt

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

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

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