Android Jetpack Compose文字投影效果实现

发表于 分类于
Android Jetpack Compose文字投影效果实现

前言

在CSS3中要实现投影很简单

1
text-shadow: h-shadow v-shadow blur-radius color|inset;
  • h-shadow：必需。水平阴影的位置，允许负值。
  • v-shadow：必需。垂直阴影的位置，允许负值。
  • blur-radius：可选。模糊距离（值越大越模糊）。
  • color：可选。阴影的颜色。
  • inset：可选。将外部阴影（默认）改为内部阴影。

那么Jetpack Compose中有相关的属性来实现吗？

Jetpack Compose中并没有文字投影效果的属性，但是我们可以通过叠加来实现。

比如

  • 文字叠加文字
  • 文字叠加阴影

文字叠加文字就是两层都是文字，把下层的文字做偏移来模拟投影的效果，但是这种效果非常的生硬。

还有就是绘制文字的阴影后再把文字叠加上去，这样效果就好一点。

文字叠加阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import android.graphics.RenderEffect
import android.graphics.Shader
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.asComposeRenderEffect
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp

@Composable
fun BlurredShadowText(
    text: String,
    modifier: Modifier = Modifier,
    textColor: Color = Color.White,
    shadowColor: Color = Color.DarkGray,
    blurRadius: Float = 2f,
    offsetX: Float = 1.2f,
    offsetY: Float = 1.2f,
    style: TextStyle = LocalTextStyle.current
) {
    Box(modifier = modifier) {
        // 阴影层（模糊 + 偏移）
        Text(
            text = text,
            style = style.copy(color = shadowColor),
            modifier = Modifier
                .offset(offsetX.dp, offsetY.dp)
                .graphicsLayer {
                    renderEffect = RenderEffect.createBlurEffect(
                        blurRadius,
                        blurRadius,
                        Shader.TileMode.CLAMP
                    ).asComposeRenderEffect()
                }
        )

        // 正常文字
        Text(
            text = text,
            style = style.copy(color = textColor)
        )
    }
}