スナックバー コンポーネントは、ページの クリックします。ユーザー エクスペリエンスを中断することなく、オペレーションやアクションに関するフィードバックを提供する。スナックバーは数秒後に消えます。「 ボタンのタップなどのアクションで閉じることもできます。
スナックバーを使用する次の 3 つのユースケースを考えてみましょう。
- 操作の確認: ユーザーがメールやメッセージを削除すると、スナックバーが表示され、操作が確認され、[元に戻す] オプションが表示されます。
- ネットワーク ステータス: アプリがインターネット接続を失うと、オフラインになったことを示すスナックバーがポップアップ表示されます。
- データの送信: フォームの送信または 変更が正常に保存されたことを示すスナックバーが表示されます。
基本的な例
スナックバーを実装するには、まず SnackbarHost
を作成します。これには
SnackbarHostState
プロパティ。SnackbarHostState
は、
スナックバーの表示に使用できる showSnackbar()
関数。
この suspend 関数は 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
の継続時間を調整できます。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 リファレンス ドキュメントをご覧ください。