英文:
How to make rounded Corner with shadow in jetpack compose
问题
I want to make rounded corner with shadow for my card view. I am trying to make look like this
I am trying in Box
with the help of Modifier
Using shadow
and clip
with ordering like this
Box(
modifier = Modifier
.fillMaxSize()
.shadow(1.dp)
.clip(RoundedCornerShape(12.dp))
.padding(
start = 16.dp,
end = 16.dp,
top = 12.dp,
bottom = 16.dp,
)
) {
// method in here
}
and it looks like this
Now I changed to order like this clip
and shadow
Box(
modifier = Modifier
.fillMaxSize()
.clip(RoundedCornerShape(12.dp))
.shadow(1.dp)
.padding(
start = 16.dp,
end = 16.dp,
top = 12.dp,
bottom = 16.dp,
)
) {
// method in here
}
and it looks like this
I don't understand the ordering of modifiers now. Can anyone guide me on this?
英文:
I want to make rounded corner with shadow for my card view. I am trying to make look like this
I am trying in Box
with the help of Modifier
Using shadow
and clip
with ordering like this
Box(
modifier = Modifier
.fillMaxSize()
.shadow(1.dp)
.clip(RoundedCornerShape(12.dp))
.padding(
start = 16.dp,
end = 16.dp,
top = 12.dp,
bottom = 16.dp,
)
) {
// method in here
}
and it looks like this
Now I changed to order like this clip
and shadow
Box(
modifier = Modifier
.fillMaxSize()
.clip(RoundedCornerShape(12.dp))
.shadow(1.dp)
.padding(
start = 16.dp,
end = 16.dp,
top = 12.dp,
bottom = 16.dp,
)
) {
// method in here
}
and it look like this
I don't understand ordering of modifier now. Can anyone guide me on this ?
答案1
得分: 11
TL;DR 仅使用 Modifier.shadow(elevation, shape),还可以根据阴影高度进行裁剪。
@Stable
fun Modifier.shadow(
elevation: Dp,
shape: Shape = RectangleShape,
clip: Boolean = elevation > 0.dp,
ambientColor: Color = DefaultShadowColor,
spotColor: Color = DefaultShadowColor,
)
在理解 Modifier 顺序之前,我认为最好先解释一下 Modifier.shadow 做什么以及它的工作原理。
Modifier.shadow 基本上是你的 Composable 周围有一些模糊效果的边框。如果你没有背景绘制它,你将得到一个基于高程和斑点颜色的矩形模糊边框,它的绘制顺序取决于它是在 Composable 的前面还是后面绘制。
第一个示例是没有任何背景的情况。在第二个示例中,阴影是在背景之后绘制的,因此它将在你的 Composable 前面绘制,就像在前面绘制边框或矩形一样。
Modifier.clip 可以将你的 Composable 的边框(包括任何绘制,例如阴影)裁剪掉,如果不使用 clip,则可以在 Composable 外部绘制任何内容,或者像在我们的示例中一样绘制阴影。
在第一个示例中,我们裁剪了阴影和边框,所以你看不到阴影,绿色矩形边框被剪切成了圆角矩形。
在第二个示例中,阴影在裁剪之前,所以它不会被裁剪,但绿色边框会被裁剪。
在第三个示例中,由于边框在 Modifier.shadow 之前,所以它不会被裁剪,正如你所看到的,它具有矩形形状。但是,在 Modifier.shadow 之后的任何东西都会被裁剪,因为 Modifier.shadow 带有 clip 参数为 true。
@Preview
@Composable
private fun ShadowSample2(){
// ...(示例代码略)
}
英文:
TL;DR Use only Modifier.shadow(elevation, shape) which also clips based on shadow elevation.
@Stable
fun Modifier.shadow(
elevation: Dp,
shape: Shape = RectangleShape,
clip: Boolean = elevation > 0.dp,
ambientColor: Color = DefaultShadowColor,
spotColor: Color = DefaultShadowColor,
)
Before understanding order of Modifiers i think it's better to explain what Modifier.shadow does and how it works.
Modifier.shadow is basically a border around your Composable with some blur effect. If you draw it without a background you will have rect with blur based on elevation and spot color and order of it depends if it will be drawn behind or in front of your Composable
@Preview
@Composable
private fun ShadowSample() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Shadow Order")
Box(
modifier = Modifier
.size(100.dp)
.shadow(
elevation = 10.dp,
spotColor = Color.Red,
shape = RoundedCornerShape(8.dp)
),
contentAlignment = Alignment.Center
) {
Text("Hello World")
}
Spacer(modifier = Modifier.height(20.dp))
Box(
modifier = Modifier
.background(Color.Red)
.size(100.dp)
.shadow(
elevation = 10.dp,
shape = RoundedCornerShape(8.dp)
),
contentAlignment = Alignment.Center
) {
Text("Hello World")
}
Spacer(modifier = Modifier.height(20.dp))
Box(
modifier = Modifier
.shadow(
elevation = 10.dp,
shape = RoundedCornerShape(8.dp)
)
.background(Color.Red)
.size(100.dp),
contentAlignment = Alignment.Center
) {
Text("Hello World")
}
}
}
First one is how it is without any background. In second one shadow is drawn after background so it's drawn in front of your Composable like drawing a border or Rect in front of it.
Modifier.clip clips everything out of your Composable your border including any drawing(without clip you can draw anything out of your Composable) or shadow in our example as in example below
In first example we clip shadow and border that's why you don't see any shadow and green Rectangle border is clipped with rounded rectangle shape.
In second example shadow is before clip so it's not clipped but green border is.
In third example since border is before Modifier.shadow it's not clipped, as you can see it has rectangle shape. But anything after Modifier.shadow is clipped because Modifier.shadow comes with clip param true.
@Preview
@Composable
private fun ShadowSample2(){
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Clipping with Shadow")
Box(
modifier = Modifier
.clip(RoundedCornerShape(8.dp))
.shadow(
elevation = 10.dp,
RoundedCornerShape(8.dp)
)
.border(1.dp, Color.Green)
.background(Color.White)
.size(100.dp),
contentAlignment = Alignment.Center
) {
Text("Hello World")
}
Spacer(modifier = Modifier.height(10.dp))
Box(
modifier = Modifier
.shadow(
elevation = 10.dp,
shape = RoundedCornerShape(8.dp)
)
.clip(RoundedCornerShape(8.dp))
.border(1.dp, Color.Green)
.background(Color.White)
.size(100.dp),
contentAlignment = Alignment.Center
) {
Text("Hello World")
}
Spacer(modifier = Modifier.height(10.dp))
Box(
modifier = Modifier
.border(1.dp, Color.Green)
.shadow(
elevation = 10.dp,
shape = RoundedCornerShape(8.dp)
)
.background(Color.White)
.size(100.dp),
contentAlignment = Alignment.Center
) {
Text("Hello World")
}
}
}
答案2
得分: 1
The shadow
modifier has the shape
property.
尝试这样做:
val shape = RoundedCornerShape(12.dp)
Box(
modifier = Modifier
.fillMaxSize()
.clip(shape)
.shadow(1.dp, shape)
.padding(
start = 16.dp,
end = 16.dp,
top = 12.dp,
bottom = 16.dp
)
英文:
The shadow
modifier has the shape
property.
Try this:
val shape = RoundedCornerShape(12.dp)
Box(
modifier = Modifier
.fillMaxSize()
.clip(shape)
.shadow(1.dp, shape)
.padding(
start = 16.dp,
end = 16.dp,
top = 12.dp,
bottom = 16.dp,
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论