如何在Jetpack Compose中创建带边框和阴影的圆角矩形文本？

在Jetpack Compose里，你可以通过Modifier组合或者使用Surface组件来实现需求，以下是两种可行方案：

方案一：使用Surface组件（推荐，符合Material设计规范） #

Surface本身支持阴影、形状和背景，搭配border修饰符就能快速实现效果：

@Composable
fun RoundedShadowText(text: String) {
    Surface(
        // 设置阴影：参数依次为阴影颜色、模糊半径、偏移量、扩散程度
        shadowElevation = 8.dp,
        // 定义圆角形状
        shape = RoundedCornerShape(12.dp),
        // 容器背景色
        color = Color.White,
        modifier = Modifier
            .padding(16.dp)
            // 添加边框：需保证边框形状与Surface的shape一致
            .border(1.dp, Color.Gray, RoundedCornerShape(12.dp))
    ) {
        Text(
            text = text,
            modifier = Modifier.padding(12.dp),
            fontSize = 16.sp
        )
    }
}

方案二：使用Box+Modifier组合 #

如果你更习惯用Box，通过组合shadow、clip、border修饰符也能达成目标：

@Composable
fun RoundedShadowTextWithBox(text: String) {
    Box(
        modifier = Modifier
            .padding(16.dp)
            // 阴影需放在最外层，关闭自动裁剪避免阴影被切掉
            .shadow(
                elevation = 8.dp,
                shape = RoundedCornerShape(12.dp),
                clip = false
            )
            // 裁剪成圆角，确保内容和边框边角统一
            .clip(RoundedCornerShape(12.dp))
            // 添加边框，形状与阴影、裁剪保持一致
            .border(1.dp, Color.Gray, RoundedCornerShape(12.dp))
            .background(Color.White)
    ) {
        Text(
            text = text,
            modifier = Modifier.padding(12.dp),
            fontSize = 16.sp
        )
    }
}

关键注意点 #

• 用Box实现时，shadow修饰符必须放在最外层，且设置clip=false，否则阴影会被后续的裁剪或边框操作截断；
• 边框、阴影、裁剪的shape参数要完全一致，避免出现边角错位的问题；
• 调整shadowElevation的数值可以改变阴影的深浅，数值越大阴影效果越明显。

内容的提问来源于stack exchange，提问作者Yunnane