スナックバー

スナックバー コンポーネントは、画面の 下部に表示される短い通知として機能します。ユーザー エクスペリエンスを中断することなく、操作やアクションに関するフィードバックを提供します。スナックバーは数秒後に消えます。ユーザーは、ボタンをタップするなどの操作でスナックバーを閉じることもできます。

スナックバーを使用できる 3 つのユースケースを次に示します。

  • アクションの確認: ユーザーがメールやメッセージを削除すると、スナックバーが表示され、アクションを確認して [元に戻す] オプションを提供します。
  • ネットワーク ステータス: アプリがインターネット接続を失うと、スナックバーがポップアップ表示され、オフラインになったことが通知されます。
  • データの送信: フォームの送信や設定の更新が正常に完了すると、スナックバーに、変更が正常に保存されたことが通知されます。
スナックバー UI コンポーネントの例。
図 1.スナックバーの例。

基本的な例

スナックバーを実装するには、まず SnackbarHost を作成します。これには、 SnackbarHostState プロパティが含まれます。SnackbarHostState を使用すると、 showSnackbar() 関数にアクセスしてスナックバーを表示できます。

この suspend 関数は CoroutineScope（ rememberCoroutineScope によって返されるものなど）を必要とし、UI イベントに応じて呼び出され、 Snackbar を Scaffold 内に表示します。

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 の継続時間を調整できます。 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": 操作ボタンのテキストを設定します。
  • duration = SnackbarDuration.Indefinite: ユーザーまたはプログラムがスナックバーを閉じるまで表示します。
  • SnackbarResult.ActionPerformed: ユーザーがスナックバーの操作ボタンをクリックしたことを示します。
  • SnackbarResult.Dismissed: ユーザーが操作ボタンをクリックせずにスナックバーを閉じたことを示します。