Snackbar 元件是顯示在畫面底部的簡短通知。可在不影響使用者體驗的情況下,針對作業或操作提供意見回饋。Snackbar 會在幾秒後消失。使用者也可以透過輕觸按鈕這類動作關閉他們。
請考慮以下三種使用 Snackbar 的用途:
- 動作確認:使用者刪除電子郵件或訊息後,系統會顯示 Snackbar 來確認動作,並提供「復原」選項。
- 網路狀態:當應用程式的網際網路連線中斷時,系統會彈出 Snackbar,說明應用程式現已離線。
- 資料提交:成功提交表單或更新設定時,Snackbar 會註明變更已成功儲存。
基本範例
如要實作 Snackbar,請先建立 SnackbarHost
,其中包含 SnackbarHostState
屬性。SnackbarHostState
提供 showSnackbar()
函式存取權,可用來顯示 Snackbar。
此暫停函式需要 CoroutineScope
(例如使用 rememberCoroutineScope
),並可用於呼叫以回應 UI 事件,以便在 Scaffold
中顯示 Snackbar
。
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 }
含動作的 Snackbar
您可以提供選擇性動作,並調整 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 }
您可以提供含有 snackbarHost
參數的自訂 Snackbar
。詳情請參閱 SnackbarHost
API 參考說明文件。