モケラ

Tech Sheets

mokelab

Jetpack ComposeでSnackbarを表示する

最終更新日:2024-08-03

Jetpack ComposeでSnackbarを表示するには ScaffoldsnackbarHost を使います。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
  val hostState = remember { SnackbarHostState() }
  val scope = rememberCoroutineScope()

  Scaffold(
    snackbarHost = { SnackbarHost(hostState) }
  ) { paddingValues ->
    Column(modifier = Modifier.padding(paddingValues)) {
      Button(onClick = {
        scope.launch {
          hostState.showSnackbar("Message")
        }
      }) {
        Text("Snack bar")
      }
    }
  }
}

実際にSnackbarを表示するには snackbarHostState.showSnackbar() を呼びます。 suspend fun になっているのでコルーチンスコープの中で実行します。

Button(onClick = {
  scope.launch {
    hostState.showSnackbar("Message")
  }
}) {
  Text("Snack bar")
}

実行結果はこんな感じです。

一覧に戻る