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

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

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

  • تأكيد الإجراء: بعد أن يحذف المستخدم رسالة إلكترونية أو رسالة، يظهر شريط معلومات لتأكيد الإجراء وتقديم خيار تراجع.
  • حالة الشبكة: عندما يفقد التطبيق اتصاله بالإنترنت، يظهر شريط إشعار مؤقت للإشارة إلى أنّه غير متصل بالإنترنت الآن.
  • إرسال البيانات: بعد إرسال نموذج أو تعديل الإعدادات بنجاح، يظهر شريط معلومات يشير إلى أنّه تم حفظ التغيير بنجاح.
أمثلة على مكونات واجهة مستخدم شريط الإعلام.
الشكل 1. أمثلة على رسائل 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
}

شريط Snackbar مع إجراء

يمكنك تقديم إجراء اختياري وتعديل مدة 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
}

يمكنك تقديم Snackbar مخصّص باستخدام المَعلمة snackbarHost. لمزيد من المعلومات، يُرجى الاطّلاع على مستندات مرجع واجهة برمجة التطبيقات SnackbarHost.

النقاط الرئيسية

  • ‫actionLabel = "Action": لضبط نص زر الإجراء
  • ‫duration = SnackbarDuration.Indefinite: لإبقاء شريط الإعلام معروضًا إلى أن يغلقه المستخدم أو البرنامج
  • ‫SnackbarResult.ActionPerformed: تشير إلى أنّ المستخدم نقر على زر الإجراء في شريط الوجبات الخفيفة.
  • ‫SnackbarResult.Dismissed: يشير إلى أنّ المستخدم تجاهل شريط الإعلامات المؤقت بدون النقر على زر الإجراء.