Jetpack Composeで角を丸くする

はじめに

Jetpack Composeで丸い角のViewを作成する際にハマりました。何度もハマっている気がするので個人的なメモとして書きます。

正解

順番が大切です。clipを先に書くこと。
backgroundを先に書いてしまうと角が丸くなりません。

view.kt

Box(modifier = Modifier
                    .clip(RoundedCornerShape(20))
                    .background(color = Color.Red)
                    ) {
                    Text(
                        modifier=Modifier.padding(10.dp),
                        color = Color.White,
                        text = "テスト"
                    )
                }