【Jetpack Compose】角丸のカードを作る

概要

こんな感じの角丸のカードを作ります。
主にジャンルを表示したりするのに使うと思います。

コード

まず、角丸にするためにこう書きます。

余白が気になる.kt

        Text(
            modifier = Modifier
                .background(
                    color = Color.Blue,
                    shape = RoundedCornerShape(50)
                ),
            text = "カレー", fontSize = 20.sp, color = Color.White
        )

この状態で表示されるのがこういうカードです。

詰まった感じで、綺麗なレイアウトになっていないことがわかると思います。
そのため、paddingで余白を調整します。

余白を調整.kt

        Text(
            modifier = Modifier
                .background(
                    color = Color.Blue,
                    shape = RoundedCornerShape(50)
                )
                .padding(top = 5.dp, start = 20.dp, end = 20.dp, bottom = 5.dp),
            text = "カレー", fontSize = 20.sp, color = Color.White
        )

これで最初に載せた通りのレイアウトにすることができました。