Jetpack Compose、Modifier.shadowの罠

ある日、ほぼほぼ三角形の形状をしたdrawableに影をつけたくなりました。¹
そういうときはModifier.shadowを使えばいいですね。

例えばこんな風に。

composable.kt

modifier = Modifier
    .shadow(
        elevation = 2.dp,
        shape = GenericShape { size, _ ->
            moveTo(x = 0f, y = 0f)
            lineTo(size.width, 0f)
            lineTo(size.width / 2f, size.height)
        },
        spotColor = Color(0xFF000000),
        ambientColor = Color(0xFF000000)
    )

ところがどっこい、影はつくけどdrawableの外側がやたらギザつきました。
はてさてどうして？？？

と思い調べてみたら、どうやらModifier.shadowにはデフォルトでclip: Boolean = elevation > 0.dpを取るようになっているようです。

Shadow.kt

@Stable
fun Modifier.shadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = elevation > 0.dp,
    ambientColor: Color = DefaultShadowColor,
    spotColor: Color = DefaultShadowColor,
) = if (elevation > 0.dp || clip) {
    inspectable(
        inspectorInfo = debugInspectorInfo {
            name = "shadow"
            properties["elevation"] = elevation
            properties["shape"] = shape
            properties["clip"] = clip
            properties["ambientColor"] = ambientColor
            properties["spotColor"] = spotColor
        }
    ) {
        graphicsLayer {
            this.shadowElevation = elevation.toPx()
            this.shape = shape
            this.clip = clip
            this.ambientShadowColor = ambientColor
            this.spotShadowColor = spotColor
        }
    }
} else {
    this
}

つまり、elevation = 2.dpと指定している時点でclip = trueになり、指定したshapeの形状に切り抜かれてしまうわけですね。

drawableの形状より指定したshapeの頂角の方が微妙に角度が浅かったために、drawableの輪郭が若干削られてギザギザになっていたみたいです。

clip = falseを指定した上で、shapeを若干調整したらいい感じになりました。
良い勉強になりました。

1. デザイナーからの指定 ↩