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

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

إليك حالات الاستخدام الثلاث التي قد تستخدم فيها شريط التطبيقات المصغّرة:

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

مثال أساسي

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