如何在Jetpack Compose中创建带填充底色的描边文字？

直接给TextStyle设置Stroke会导致文字主体透明，因为Stroke只负责绘制文字轮廓，不会填充内部区域。要实现带填充的描边效果，需要叠加绘制两层文字：一层填充主体，一层绘制描边。

方法一：用Box叠加两个Text #

这是最直接简单的做法，通过Box让两个Text重叠，底层是填充好的主体文字，上层是描边的轮廓文字：

Box(contentAlignment = Alignment.Center) {
    // 底层：填充的主体文字
    Text(
        text = "你的目标文本",
        style = TextStyle(
            fontFamily = robotoFamily,
            fontWeight = FontWeight.Bold,
            fontSize = 86.sp,
            letterSpacing = 0.86.sp,
            lineHeight = 20.sp,
            textAlign = TextAlign.Center,
            color = MaterialTheme.colorScheme.surface, // 主体填充色
            shadow = Shadow(
                color = Color.Gray,
                offset = Offset(-16f, 16f),
                blurRadius = 8f
            )
        )
    )
    // 上层：描边的轮廓文字
    Text(
        text = "你的目标文本",
        style = TextStyle(
            fontFamily = robotoFamily,
            fontWeight = FontWeight.Bold,
            fontSize = 86.sp,
            letterSpacing = 0.86.sp,
            lineHeight = 20.sp,
            textAlign = TextAlign.Center,
            color = Color.Black, // 描边颜色
            drawStyle = Stroke(
                miter = 10f,
                width = 10f,
                join = StrokeJoin.Miter
            )
        )
    )
}

注意：描边颜色要和主体颜色区分开，阴影只给底层文字添加即可，否则描边也带阴影会显得杂乱。

方法二：用自定义Modifier优化代码 #

如果不想重复编写Text组件，可以用Modifier.drawBehind先绘制描边版本，再显示主体文字：

Text(
    text = "你的目标文本",
    style = TextStyle(
        fontFamily = robotoFamily,
        fontWeight = FontWeight.Bold,
        fontSize = 86.sp,
        letterSpacing = 0.86.sp,
        lineHeight = 20.sp,
        textAlign = TextAlign.Center,
        color = MaterialTheme.colorScheme.surface,
        shadow = Shadow(
            color = Color.Gray,
            offset = Offset(-16f, 16f),
            blurRadius = 8f
        )
    ),
    modifier = Modifier.drawBehind {
        // 先绘制描边文字
        drawText(
            textLayoutResult = this@Text.textLayoutResult!!,
            color = Color.Black,
            style = TextStyle(
                drawStyle = Stroke(
                    miter = 10f,
                    width = 10f,
                    join = StrokeJoin.Miter
                )
            )
        )
    }
)

这种方式只需要一个Text组件，代码更简洁，视觉效果和方法一完全一致。

核心说明 #

Stroke本身是描边绘制样式，它的作用仅为勾勒文字边缘，不会填充内部区域，所以单独使用时文字主体会呈现透明状态。必须通过叠加填充层和描边层，才能实现带填充的描边文字效果。

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