使用 Snackbar 建立通知
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
Snackbar 元件是短暫通知,會顯示在畫面底部。它可提供作業或動作的意見回饋,且不會中斷使用者體驗。小工具列會在幾秒後消失。使用者也可以透過動作關閉通知,例如輕觸按鈕。
請考慮下列三種可能會使用 Snackbar 的用途:
- 確認動作:使用者刪除電子郵件或訊息後,系統會顯示快訊列,讓使用者確認動作並提供「復原」選項。
- 網路狀態:當應用程式失去網際網路連線時,系統會彈出快訊列,指出應用程式目前處於離線狀態。
- 資料提交:成功提交表單或更新設定後,系統會在 Snackbar 中顯示變更已成功儲存的通知。
版本相容性
這個實作方式要求專案 minSDK 設為 API 級別 21 以上。
依附元件
建立基本 Snackbar
如要實作 Snackbar,請先建立 SnackbarHost
,其中包含 SnackbarHostState
屬性。SnackbarHostState
提供 showSnackbar()
函式的存取權,可用於顯示 Snackbar。
此暫停函式需要 CoroutineScope
(例如使用 rememberCoroutineScope
),並且可以呼叫此函式以回應 UI 事件,以便顯示 Scaffold
內部的 Snackbar
。
建立含有動作的 Snackbar
您可以提供選擇性動作,並調整 Snackbar
的持續期間。
snackbarHostState.showSnackbar()
函式可接受額外的 actionLabel
和 duration
參數,並傳回 SnackbarResult
。
您可以提供含有 snackbarHost
參數的自訂 Snackbar
。詳情請參閱 SnackbarHost
API 參考資料文件。
結果
圖 1. 含有動作的 Snackbar 通知。
包含此指南的集合
本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:
顯示互動式元件
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-02-06 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-02-06 (世界標準時間)。"],[],[],null,["\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\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\nDependencies\n\nCreate a basic snackbar\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\nCreate a snackbar with action\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\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**Figure 1.** Snackbar notifications with action.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \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 \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)"]]