如何在Jetpack Compose中创建带阴影的圆角?

huangapple go评论138阅读模式
英文:

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

如何在Jetpack Compose中创建带阴影的圆角?

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

如何在Jetpack Compose中创建带阴影的圆角?

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

如何在Jetpack Compose中创建带阴影的圆角?

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

如何在Jetpack Compose中创建带阴影的圆角?

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

如何在Jetpack Compose中创建带阴影的圆角?

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

如何在Jetpack Compose中创建带阴影的圆角?

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

如何在Jetpack Compose中创建带阴影的圆角?

@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

如何在Jetpack Compose中创建带阴影的圆角?

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.

Modifier.shadow

尝试这样做:

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.

Modifier.shadow

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,
    )

huangapple
  • 本文由 发表于 2023年4月6日 22:08:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/75950471.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定