JetpackComposeでSnackbarの実装方法

JetpackComposeの知識を深めるために、今回はSnackbarを実装を試してみたいと思います。

リファレンス

実装方法

SnackbarView.kt

@Composable
fun SnackbarView() {
    Column {
        val snackbarVisibleState = remember { mutableStateOf(false) }
        Button(modifier = Modifier.padding(16.dp),
            onClick = { snackbarVisibleState.value = true }) {
            Text("スナックバー表示")
        }
        if (snackbarVisibleState.value) {
            Snackbar(
                action = {
                    Text(
                        modifier = Modifier.clickable { snackbarVisibleState.value = false },
                        text = AnnotatedString("閉じる")
                    )
                },
                modifier = Modifier.padding(8.dp), 
                content = { Text(text = "スナックバーの表示メッセージ") }
            )
        }
    }
}

Snackbarが用意されているので、contentに表示したいViewをactionに今回は閉じる用のクリックできるテキストを設定してみました。actionはSnackbarの右側の領域に設定されます。

サンプル動作

シンプルなSnackbarは簡単に作れそうです。