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

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

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

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

דוגמה בסיסית

כדי להטמיע סרגל אינטראקטיבי, צריך קודם ליצור 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.