إنشاء إشعار يتضمّن شريط معلومات سريع
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يُعدّ مكوّن شريط التطبيقات المصغرة بمثابة إشعار موجز يظهر في
أسفل الشاشة. تقدّم الملاحظات والآراء حول عملية أو إجراء بدون
مقاطعة تجربة المستخدم. تختفي أشرطة التطبيقات المصغّرة بعد بضع ثوانٍ. ويمكنه أيضًا إغلاقها من خلال إجراء، مثل النقر على زر.
إليك حالات الاستخدام الثلاث التي قد تستخدم فيها شريط التطبيقات المصغّرة:
- تأكيد الإجراء: بعد أن يحذف المستخدم رسالة إلكترونية أو رسالة، يظهر
شريط معلومات سريع لتأكيد الإجراء وتوفير خيار "التراجع".
- حالة الشبكة: عندما ينقطع اتصال التطبيق بالإنترنت، ينبثق شريط معلومات سريع
للإشارة إلى أنّه غير متصل بالإنترنت.
- إرسال البيانات: عند إرسال نموذج أو تعديل الإعدادات بنجاح، يشير شريط التطبيقات المنبثقة إلى أنّه تم حفظ التغيير بنجاح.
توافق الإصدار
يتطلّب هذا التنفيذ ضبط الحد الأدنى من إصدار حزمة تطوير البرامج (SDK) لمشروعك على المستوى 21 من واجهة برمجة التطبيقات
أو إصدار أحدث.
التبعيات
إنشاء شريط معلومات سريع أساسي
لتنفيذ شريط معلومات سريع، عليك أولاً إنشاء SnackbarHost
، الذي يتضمّن سمة
SnackbarHostState
. توفّر SnackbarHostState
إمكانية الوصول إلى الدالة
showSnackbar()
التي يمكنك استخدامها لعرض شريط التطبيقات المصغّرة.
تتطلّب وظيفة التعليق هذه CoroutineScope
، مثل استخدام
rememberCoroutineScope
، ويمكن استدعاؤها استجابةً لأحداث واجهة المستخدم ل
عرض Snackbar
خلال Scaffold
.
إنشاء شريط معلومات سريع يتضمّن إجراءً
يمكنك تقديم إجراء اختياري وضبط مدة Snackbar
.
تقبل الدالة snackbarHostState.showSnackbar()
مَعلمتَي actionLabel
وduration
إضافيتين، وتُرجع SnackbarResult
.
يمكنك تقديم Snackbar
مخصّص باستخدام المَعلمة snackbarHost
. اطّلِع على مستندات مرجعية حول واجهة برمجة التطبيقات SnackbarHost
للحصول على مزيد من المعلومات.
النتائج
الشكل 1. إشعارات شريط التطبيقات المصغّرة التي تتضمّن إجراءً
المجموعات التي تتضمّن هذا الدليل
هذا الدليل هو جزء من مجموعات الأدلة السريعة المنظَّمة التي تتناول
أهداف تطوير Android الأوسع نطاقًا:
عرض المكونات التفاعلية
تعرَّف على كيفية استخدام الدوال القابلة للتجميع لإنشاء مكونات جميلة لواجهة المستخدم بسهولة استنادًا إلى نظام التصميم المتعدّد الأبعاد.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Create a notification with a snackbar\n\n\u003cbr /\u003e\n\nThe [snackbar component](https://material.io/components/snackbars) serves as a brief notification that appears at the\nbottom of the screen. It provides feedback about an operation or action without\ninterrupting the user experience. Snackbars disappear after a few seconds. The\nuser can also dismiss them with an action, such as tapping a button.\n\nConsider these three use cases where you might use a snackbar:\n\n- **Action confirmation:** After a user deletes an email or message, a snackbar appears to confirm the action and offer an \"Undo\" option.\n- **Network status:** When the app loses its internet connection, a snackbar pops up to note that it is now offline.\n- **Data submission:** Upon successfully submitting a form or updating settings, a snackbar notes that the change has saved successfully.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic snackbar\n-----------------------\n\nTo implement a snackbar, you first create [`SnackbarHost`](/reference/kotlin/androidx/compose/material3/package-summary#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)), which includes a\n[`SnackbarHostState`](/reference/kotlin/androidx/compose/material3/SnackbarHostState) property. `SnackbarHostState` provides access to the\n[`showSnackbar()`](/reference/kotlin/androidx/compose/material3/SnackbarHostState#showsnackbar) function which you can use to display your snackbar.\n\nThis suspending function requires a `CoroutineScope` such as with using\n[`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope) --- and can be called in response to UI events to\nshow a [`Snackbar`](/reference/kotlin/androidx/compose/material3/package-summary#snackbar) within `Scaffold`.\n\n\u003cbr /\u003e\n\n```kotlin\nval scope = rememberCoroutineScope()\nval snackbarHostState = remember { SnackbarHostState() }\nScaffold(\n snackbarHost = {\n SnackbarHost(hostState = snackbarHostState)\n },\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show snackbar\") },\n icon = { Icon(Icons.Filled.Image, contentDescription = \"\") },\n onClick = {\n scope.launch {\n snackbarHostState.showSnackbar(\"Snackbar\")\n }\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L218-L240\n \n```\n\n\u003cbr /\u003e\n\nCreate a snackbar with action\n-----------------------------\n\nYou can provide an optional action and adjust the duration of the `Snackbar`.\nThe `snackbarHostState.showSnackbar()` function accepts additional `actionLabel`\nand `duration` parameters, and returns a [`SnackbarResult`](/reference/kotlin/androidx/compose/material3/SnackbarResult).\n\n\u003cbr /\u003e\n\n```kotlin\nval scope = rememberCoroutineScope()\nval snackbarHostState = remember { SnackbarHostState() }\nScaffold(\n snackbarHost = {\n SnackbarHost(hostState = snackbarHostState)\n },\n floatingActionButton = {\n ExtendedFloatingActionButton(\n text = { Text(\"Show snackbar\") },\n icon = { Icon(Icons.Filled.Image, contentDescription = \"\") },\n onClick = {\n scope.launch {\n val result = snackbarHostState\n .showSnackbar(\n message = \"Snackbar\",\n actionLabel = \"Action\",\n // Defaults to SnackbarDuration.Short\n duration = SnackbarDuration.Indefinite\n )\n when (result) {\n SnackbarResult.ActionPerformed -\u003e {\n /* Handle snackbar action performed */\n }\n SnackbarResult.Dismissed -\u003e {\n /* Handle snackbar dismissed */\n }\n }\n }\n }\n )\n }\n) { contentPadding -\u003e\n // Screen content\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/layouts/MaterialLayoutSnippets.kt#L247-L283\n \n```\n\n\u003cbr /\u003e\n\nYou can provide a custom `Snackbar` with the `snackbarHost` parameter. See the\n[`SnackbarHost` API reference docs](/reference/kotlin/androidx/compose/material/package-summary#snackbarhost) for more information.\n\nResults\n-------\n\n\n**Figure 1.** Snackbar notifications with action.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]