Jetpack Compose 表面添加自定义阴影

Question

我正在尝试在 jetpack compose 中开发自定义工具栏，但它的阴影应用于四个侧面，但我想实现 3 个侧面阴影（顶部不需要）

Surface(
    shape = RectangleShape,
    color = toolBarBackground(),
    elevation = 12.dp,
) {
    ...
}

我试过自定义形状，但问题是路径必须闭合。我已经做了一个简单的勾号来克服这个但没有工作（组件大小本身改变）。

private val CustomThreeSideShape = GenericShape { size, _ ->
    moveTo(0f, -100f)
    lineTo(0f, size.height)
    lineTo(size.width, size.height)
    lineTo(size.width, -100f)
    lineTo(0f, -100f)
    close()
}

Answer 1

暂不支持，星this issue更新。

与此同时，您可以将此 hack 与 Modifier.drawWithContent combined with DrawScope.clipRect 一起使用：

val padding = 20.dp
val density = LocalDensity.current
Surface(
    shape = RectangleShape,
    color = Color.White,
    elevation = 12.dp,
    modifier = Modifier
        .padding(padding)
        .drawWithContent {
            val paddingPx = with(density) { padding.toPx() }
            clipRect(
                left = -paddingPx,
                top = 0f,
                right = size.width + paddingPx,
                bottom = size.height + paddingPx
            ) {
                this@drawWithContent.drawContent()
            }
        }
) {
    Text(
        "Hello",
        modifier = Modifier.padding(10.dp).fillMaxWidth()
    )
}

结果：

Jetpack Compose 表面添加自定义阴影

Jetpack Compose surface add custom shadow

android

kotlin

android-jetpack

android-jetpack-compose