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

يعمل مكون 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. تقبل الدالة 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 للحصول على مزيد من المعلومات.