如何在Jetpack Compose中实现文本的圆角阴影效果？

你之前在XML中通过android:shadowColor、android:shadowDx、android:shadowDy、android:shadowRadius实现的是跟随文字轮廓的阴影，而Jetpack Compose里的Modifier.shadow()是给整个组件的容器（方形区域）添加阴影，所以会出现不符合需求的方形阴影。要实现和XML一致的效果，你需要用文本专属的阴影配置，而非容器阴影。

方法一：使用TextStyle的Shadow参数（最简单方案） #

直接在Text的style参数中配置Shadow，对应XML里的各项参数：

• color → android:shadowColor
• offset → android:shadowDx（x轴偏移）和android:shadowDy（y轴偏移）
• blurRadius → android:shadowRadius

示例代码：

Text(
    text = "你的目标文本",
    fontSize = 32.sp,
    color = Color.White, // 原文本颜色
    style = TextStyle(
        shadow = Shadow(
            color = Color.Black,
            offset = Offset(3f, 3f), // 对应Dx=3、Dy=3
            blurRadius = 2f // 对应shadowRadius=2
        )
    )
)

方法二：自定义绘制（复杂场景适用） #

如果需要更灵活的控制（比如多层阴影、动态调整），可以用drawWithContent modifier手动绘制阴影和原文本：

Text(
    text = "你的目标文本",
    fontSize = 32.sp,
    color = Color.White,
    modifier = Modifier.drawWithContent {
        // 对应XML的阴影参数
        val shadowColor = Color.Black
        val shadowDx = 3f
        val shadowDy = 3f
        val shadowRadius = 2f

        // 先绘制带模糊效果的阴影文本，偏移Dx和Dy
        drawText(
            textLayoutResult = layoutResult,
            color = shadowColor,
            offset = Offset(shadowDx, shadowDy),
            style = TextStyle(
                shadow = Shadow(
                    color = shadowColor,
                    offset = Offset.Zero,
                    blurRadius = shadowRadius
                )
            )
        )
        // 再绘制原文本，覆盖在阴影上方
        drawContent()
    }
)

关键区别说明 #

• Modifier.shadow()：作用于组件的布局边界，生成的阴影形状和组件的布局区域一致（比如Text的默认布局是方形，所以阴影是方形）。
• TextStyle.Shadow：作用于文字的字形轮廓，阴影会跟随每个文字的形状，和你在XML中实现的效果完全一致。

内容的提问来源于stack exchange，提问作者Михаил Акулов