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

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

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

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

דוגמה בסיסית

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