SnackbarとSnackbarHostState
Materialらしい一時メッセージを表示します。
「SnackbarとSnackbarHostState」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
Snackbarとは
Snackbarは、たとえば「メッセージを送信しました」のような短いメッセージを画面下部から一時的に表示し、その後自動的に消えるものです。画面を操作できる状態のまま通知できます。💬
SnackbarとDialogの違い
Dialogは応答を求めますが、Snackbarは求めません。すぐに伝えたい確認にはSnackbarを使い、ユーザーが必ず選択しなければならない内容には使わないでください。
SnackbarHostStateを知る
Snackbarの表示はSnackbarHostStateによって制御します。このオブジェクトがキューを保持し、メッセージを表示する関数を提供します。
val hostState = remember { SnackbarHostState() }rememberで保持する
同じSnackbarHostStateを再コンポジション後も維持できるよう、状態をrememberでラップします。フレームごとに新しい状態を作ると、保留中のメッセージが失われます。
snackbarHostスロット
SnackbarHostを状態にバインドしてsnackbarHostスロットに設定し、Snackbarをどこに表示するかをScaffoldに伝えます。
snackbarHost = { SnackbarHost(hostState) }showSnackbarはSuspend関数
showSnackbar関数は、メッセージが表示されている間待機するためサスペンドします。そのため、クリック処理から直接呼び出さず、コルーチンから呼び出す必要があります。
スコープから起動する
rememberCoroutineScopeを取得し、その中でshowSnackbarを起動します。これにより、通常のonClickからsuspend呼び出しへ安全につなげられます。
scope.launch {
hostState.showSnackbar("Saved")
}アクションを追加する
actionLabelを渡して、Undoなどのボタンを追加します。呼び出しは、ユーザーがそのアクションをタップしたかどうかを示す結果を返します。
val result = hostState.showSnackbar(
"Deleted", actionLabel = "Undo"
)結果に応じて処理する
返されたSnackbarResultを確認します。ActionPerformedと等しければ元に戻す処理を実行し、それ以外の場合はSnackbarが閉じただけです。
if (result == SnackbarResult.ActionPerformed) {
restoreItem()
}表示時間を制御する
SnackbarDurationで表示時間を設定します。指定できるのはShort、Long、Indefiniteです。Indefiniteは、ユーザーの操作が本当に必要な場合だけ使います。
1つのホストで複数のメッセージ
1つのSnackbarHostStateがメッセージをキューに入れ、1つずつ表示します。そのため、複数作成するのではなく、Scaffoldごとに1つのホストを共有します。
クイックチェック
なぜshowSnackbarをコルーチンスコープ内で起動する必要があるのでしょうか？
まとめ
SnackbarHostStateをrememberで保持し、ScaffoldのsnackbarHostに接続してから、スコープ内でshowSnackbarを起動します。これで完成度の高いアプリの外枠を仕上げられます。🎉
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「SnackbarとSnackbarHostState」レッスンは無料ですか？
はい。「SnackbarとSnackbarHostState」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「SnackbarとSnackbarHostState」で何を学びますか？
Materialらしい一時メッセージを表示します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「SnackbarとSnackbarHostState」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Scaffold：画面の骨組み
- TopAppBarとアクションアイコン
- 下部バーとフローティングアクションボタン
- SnackbarとSnackbarHostState