[英]Jetpack Compose surface add custom shadow
I am trying to develop a custom toolbar in jetpack compose but its shadow is applying to four sides but I want to achieve 3 side shadow(don't needed in top)我正在尝试在 jetpack compose 中开发自定义工具栏,但它的阴影适用于四个侧面,但我想实现 3 个侧面阴影(顶部不需要)
Surface(
shape = RectangleShape,
color = toolBarBackground(),
elevation = 12.dp,
) {
...
}
I have tried custom shape, but the problem is path must be closed.我尝试过自定义形状,但问题是路径必须关闭。 I have done a simple tick as follows to overcome that but not working(component size itself changing).
我做了一个简单的勾号如下来克服这个问题,但不起作用(组件大小本身在改变)。
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()
}
This is not yet supported, star this issue for updates.尚不支持此问题,请在此问题上加注以获取更新。
Meanwhile you can use this hack with Modifier.drawWithContent
combined with DrawScope.clipRect
:同时,您可以将此 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()
)
}
Result:结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.