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

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

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

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

مثال أساسي

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