android - 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更新。
同时，您可以将这个技巧与 Modifier.drawWithContent 一起使用。结合 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()
    )
}

结果: