Jetpack Composeで両端にmarginを効かせたborderを作りたい

Heightが1dpのSpacerにpadding追加しただけだと、意図したborder（罫線）が作れなかったのでメモ。

やりたいこと

以下のような両端にmarginを効かせたborderを作りたい。

backgroundを塗りつぶして、高さを1dpにして、borderを作成することはよくあると思います。

例えば、Qiitaの見出し下線みたいなborderを作りたいとします。
そこで両端にpaddingを効かせても、backgroundを塗りつぶしてしまっているので意図した表現ができません。

@Composable
fun border() {
    Spacer(
        modifier = Modifier
            .background(Color.DarkGray)
            .fillMaxWidth()
            .padding(horizontal = 30.dp)
            .height(1.dp)
    )
}

上図のPreviewで見ての通り、paddingは効いていますが、backgroundを塗りつぶしてしまっているので、普通の罫線になっています。

xmlで実装するときはmarginがあったのでそれでよかったんですが、Jetpack Composeにはmarginがないので、工夫する必要があります。

やり方

paddingを効かせたBoxで包みましょう。

@Composable
fun border() {
    Box(
        modifier = Modifier
            .wrapContentHeight()
            .fillMaxWidth()
            .padding(horizontal = 30.dp)
    ) {
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.DarkGray)
                .height(1.dp)
        )
    }
}

ん〜やっぱりmargin欲しくなってしまう私はまだJetpack Compose初心者なのかもしれません(泣)