شريط إعلام منبثق

يعمل مكوِّن snackbar كإشعار موجز يظهر في أسفل الشاشة. يوفر ملاحظات حول عملية أو إجراء دون مقاطعة تجربة المستخدم. تختفي أشرطة الإعلام المنبثقة بعد بضع ثوانٍ. ويمكن للمستخدم أيضًا إغلاقها من خلال تنفيذ إجراء مثل النقر على زر.

ضع في اعتبارك حالات الاستخدام الثلاث هذه التي يمكنك من خلالها استخدام شريط وجبات خفيفة:

• تأكيد الإجراء: بعد أن يحذف المستخدم رسالة إلكترونية أو رسالة إلكترونية، يظهر شريط صغير لتأكيد الإجراء ويعرض خيار "تراجع".
• حالة الشبكة: عندما يفقد التطبيق الاتصال بالإنترنت، ينبثق شريط للوجبات الخفيفة لملاحظة أنه غير متصل بالإنترنت الآن.
• إرسال البيانات: عند إرسال نموذج بنجاح أو تحديث الإعدادات، يشير شريط للوجبات الخفيفة إلى أنه تم حفظ التغيير بنجاح.

مثال أساسي

لاستخدام شريط للوجبات الخفيفة، عليك أولاً إنشاء 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 للحصول على مزيد من المعلومات.