Snackbars وSnackbarHostState
اعرض رسائل مؤقتة بأسلوب Material
Snackbars وSnackbarHostState درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
What Is a Snackbar?
A Snackbar is a brief message that slides up at the bottom, like Message sent, then fades on its own. It informs without blocking the screen. 💬
Snackbar vs Dialog
A dialog demands a response; a Snackbar does not. Reach for it for quick confirmations, not for choices the user must make.
Meet SnackbarHostState
Showing a snackbar is driven by SnackbarHostState. This object holds the queue and gives you the function that triggers a message.
val hostState = remember { SnackbarHostState() }Remember It
Wrap the state in remember so the same SnackbarHostState survives recomposition. A fresh one each frame would lose any pending message.
The snackbarHost Slot
Tell Scaffold where snackbars appear by filling its snackbarHost slot with a SnackbarHost bound to your state.
snackbarHost = { SnackbarHost(hostState) }showSnackbar Is Suspend
The showSnackbar function suspends, because it waits while the message is visible. So you must call it from a coroutine, not directly in a click.
Launch From a Scope
Grab a rememberCoroutineScope and launch showSnackbar inside it. That bridges a normal onClick to the suspend call safely.
scope.launch {
hostState.showSnackbar("Saved")
}Add an Action
Pass an actionLabel to add a button, such as Undo. The call returns a result telling you whether the user tapped that action.
val result = hostState.showSnackbar(
"Deleted", actionLabel = "Undo"
)React to the Result
Check the returned SnackbarResult. If it equals ActionPerformed, run your undo logic; otherwise the snackbar simply dismissed.
if (result == SnackbarResult.ActionPerformed) {
restoreItem()
}Control the Duration
Set how long it lingers with SnackbarDuration: Short, Long, or Indefinite. Use Indefinite only when the message truly needs the user to act.
One Host, Many Messages
A single SnackbarHostState queues messages, showing them one at a time. So share one host per Scaffold rather than creating several.
Quick Check
Why must you launch showSnackbar inside a coroutine scope?
Recap
Remember a SnackbarHostState, wire it into Scaffold's snackbarHost, then launch showSnackbar from a scope. You can finish a polished app shell now. 🎉
الأسئلة الشائعة
هل درس «Snackbars وSnackbarHostState» مجاني؟
نعم — نص درس «Snackbars وSnackbarHostState» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «Snackbars وSnackbarHostState»؟
اعرض رسائل مؤقتة بأسلوب Material تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «Snackbars وSnackbarHostState»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Scaffold: الهيكل الأساسي للشاشة
- TopAppBar وأيقونات الإجراءات
- الأشرطة السفلية وأزرار الإجراءات العائمة
- Snackbars وSnackbarHostState