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

尚不支持此功能，请为此问题加注星标以获取更新。

同时，您可以将此 hack 与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()
    )
}

结果：