Jetpack Compose表面添加自定义阴影。

Question

我正在尝试在Jetpack Compose中开发自定义工具栏，但它的阴影应用于四个方向，而我想实现三面阴影（顶部不需要）。

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()
}

- Ebin Joy

Answer 1

目前此功能尚未得到支持，您可以点赞此问题以保持更新。

与此同时，您可以使用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
            ) {
                [e-mail]()
            }
        }
) {
    Text(
        "Hello",
        modifier = Modifier.padding(10.dp).fillMaxWidth()
    )
}

结果：

- Phil Dukhov

---

这里的阴影存在问题，它正在使用我们组件的内部空间。相邻的组件具有填充边距。 - Ebin Joy

@EbinJoy 我不明白。如果这个解决方案对你无效，请在你的问题中添加细节。 - Phil Dukhov

在我的理解中，阴影应该被渲染在工具栏组件下方的组件上，而不是在我们组件的填充内部。在你的解决方案中，我们使用了“20 dp”填充，而阴影就画在那里了。 - Ebin Joy

实际上，您可以取一个比填充值大得多的值，它不会绘制任何额外的内容。 - Phil Dukhov