Snackbar

Snackbar 元件是短暫通知，會顯示在畫面底部。它可提供作業或動作的意見回饋，且不會中斷使用者體驗。小工具列會在幾秒後消失。使用者也可以透過動作關閉通知，例如輕觸按鈕。

請考慮下列三種可能會使用 Snackbar 的用途：

  • 動作確認：使用者刪除電子郵件或訊息後，系統會顯示快訊列，要求使用者確認該動作，並提供「復原」選項。
  • 網路狀態：當應用程式失去網際網路連線時，系統會彈出快訊列，指出應用程式目前處於離線狀態。
  • 資料提交：成功提交表單或更新設定後，系統會在 Snackbar 中顯示變更已成功儲存的通知。
圖 1. 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
}
MaterialLayoutSnippets.kt

含有動作的 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
}
MaterialLayoutSnippets.kt

您可以提供含有 snackbarHost 參數的自訂 Snackbar。詳情請參閱 SnackbarHost API 參考資料文件。

重點

  • actionLabel = "Action"：設定動作按鈕文字。
  • withDismissAction = true：在 Snackbar 中提供一個十字架圖示。輕觸即可關閉 Snackbar。
  • duration = SnackbarDuration.Indefinite：在使用者或程式關閉前，持續顯示 Snackbar。
  • SnackbarResult.ActionPerformed：表示使用者已按下 Snackbar 的動作按鈕。
  • SnackbarResult.Dismissed：表示使用者關閉 Snackbar 時並未按一下動作按鈕。