如何在 Jetpack Compose 中创建带有填充正文的轮廓文本

Question

要创建轮廓文本，您可以对其应用描边效果，但随后会使正文保持透明。 我想在这里实现的是

而不是

Answer 1

为了创建描边效果，我们只需要像这样的样式：

TextStyle(
        fontFamily = robotoFamily,
        fontWeight = FontWeight.Bold,
        fontSize = 86.sp,
        letterSpacing = 0.86.sp,
        lineHeight = 20.sp,
        textAlign = TextAlign.Center,
        color = MaterialTheme.colorScheme.surface,
        drawStyle = Stroke(
            miter = 10f,
            width = 10f,
            join = StrokeJoin.Miter
        ),
        shadow = Shadow(
            color = Color.Gray,
            offset = Offset(-16f, 16f),
            blurRadius = 8f
        )
    )

这将产生第二张图像。文本主体将是透明的，因此其后面的阴影线是可见的。 为了让文本具有不同颜色的笔划，我想出了另一个覆盖文本的技巧。

@Composable
fun SensorText(text: String) {
    Text(
        text = text,
        style = superLargeStyleOutline
    )

    Text(
        text = text,
        style = superLargeStyle
    )
}

val superLargeStyle: TextStyle
    @Composable
    get() {
        return TextStyle(
            fontFamily = robotoFamily,
            fontWeight = FontWeight.Bold,
            fontSize = 86.sp,
            letterSpacing = 0.86.sp,
            lineHeight = 20.sp,
            textAlign = TextAlign.Center,
            color = MaterialTheme.colorScheme.surface
        )
    }
val superLargeStyleOutline: TextStyle
    @Composable
    get() {
        return superLargeStyle.copy(
            color = Color(0xFF9CB2D0),
            drawStyle = Stroke(
                miter = 10f,
                width = 10f,
                join = StrokeJoin.Miter
            ),
            shadow = Shadow(
                color = Color.Gray,
                offset = Offset(-16f, 16f),
                blurRadius = 8f
            )
        )
    }

渴望看到其他人如何实现相同的结果。