如何在Jetpack Compose中实现带真实边框的文本？

你用Text的shadow属性只能生成模糊阴影，没法做出清晰的文本描边效果。这里提供两种靠谱的实现方案：

方案一：多Text叠加实现细边框 #

通过在主文本的上下左右四个方向各绘制一层边框颜色的文本，再叠加主文本，模拟出边框效果。适合较细的边框场景：

@Composable
fun BorderedText(
    text: String,
    textColor: Color,
    borderColor: Color,
    borderWidth: Float,
    style: TextStyle = TextStyle()
) {
    Box(contentAlignment = Alignment.Center) {
        // 四个方向的边框文本
        listOf(
            Offset(-borderWidth, 0f),
            Offset(borderWidth, 0f),
            Offset(0f, -borderWidth),
            Offset(0f, borderWidth)
        ).forEach { offset ->
            Text(
                text = text,
                style = style.copy(color = borderColor),
                modifier = Modifier.offset(x = offset.x, y = offset.y)
            )
        }
        // 中间的主文本
        Text(
            text = text,
            style = style.copy(color = textColor)
        )
    }
}

使用示例：

BorderedText(
    text = "lorem ipsum",
    textColor = Color.White,
    borderColor = Color.Black,
    borderWidth = 2f,
    style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold)
)

方案二：Canvas绘制实现完美边框 #

利用Canvas的绘制能力，先绘制带描边的文本路径，再绘制填充文本，能实现无缝隙、任意宽度的真实边框：

@Composable
fun CanvasBorderedText(
    text: String,
    textColor: Color,
    borderColor: Color,
    borderWidth: Float,
    style: TextStyle = TextStyle()
) {
    val textMeasurer = rememberTextMeasurer()
    val textLayout = remember(text, style) {
        textMeasurer.measure(AnnotatedString(text), style = style)
    }

    Canvas(modifier = Modifier.wrapContentSize()) {
        // 绘制描边
        val strokePaint = Paint().apply {
            color = borderColor
            style = PaintingStyle.Stroke
            strokeWidth = borderWidth
            isAntiAlias = true
        }
        drawText(textLayout, Offset.Zero, strokePaint)
        
        // 绘制填充文本
        drawText(textLayout, Offset.Zero, color = textColor)
    }
}

使用示例：

CanvasBorderedText(
    text = "lorem ipsum",
    textColor = Color.White,
    borderColor = Color.Black,
    borderWidth = 3f,
    style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold)
)

两种方案对比：

• 叠加Text方案实现简单，但边框过粗时可能出现边角缝隙；
• Canvas方案效果更精准，支持任意边框宽度，是实现真实文本边框的最优解。

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