Snackbar

Snackbar 元件是顯示在畫面上的簡短通知 。可針對未偵測到的作業或操作提供回饋 不會幹擾使用者體驗Snackbar 會在幾秒後消失。 使用者也可以透過任何動作 (例如輕觸按鈕) 關閉廣告。

請考慮以下三種使用 Snackbar 的用途：

  • 動作確認：使用者刪除電子郵件或郵件後， 系統顯示 Snackbar，以確認動作並提供「復原」如果有需要 SQL 指令的分析工作負載 則 BigQuery 可能是最佳選擇
  • 網路狀態：當應用程式的網際網路連線中斷時，系統會發出 Snackbar 。
  • 資料提交：成功提交表單或更新時 設定，Snackbar 會註明變更已成功儲存

基本範例

如要實作 Snackbar，請先建立 SnackbarHost，其中包含 SnackbarHostState 資源。SnackbarHostState 可讓您存取 showSnackbar() 函式，可用來顯示 Snackbar。

這個暫停函式需要 CoroutineScope，例如： rememberCoroutineScope - 用來回應以下項目的使用者介面事件： 在 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 參考文件。