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

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

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

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

مثال أساسي

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