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 參考文件。