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

يعمل مكون 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 with action

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