在 Jetpack Compose 中使用修改器在文本上绘制形状

Question

我正在尝试使用 Jetpack Compose 混淆一些文本。显然，如果您有 Android 12.

，则 blur 修饰符可以为这个用例创造奇迹

我的设备替代方案运行较低的 API 版本是简单地在文本上绘制一个黑色矩形。我认为使用 graphicsLayer 或 drawBehind 等现有修饰符会相对容易，但我一直无法弄清楚，我现在不知所措......

我当前的文本可组合项如下所示：

Text(
    modifier = if (blurText) {
        Modifier.blur(16.dp, BlurredEdgeTreatment.Unbounded)
    } else {
        Modifier
    },
    text = textToObfuscate,
    fontFamily = latoFontFamily,
    fontWeight = FontWeight.W700,
    fontSize = 16.sp,
    color = black,
)

我可以将文本包裹在一个 Box 中，然后在其中放置另一个 Box 来绘制文本，但这似乎毫无用处，而且比应有的工作量更多。

如果有人对如何使用修改器扩展来实现这一点有任何想法，那就太棒了！

Answer 1

您可以将Modifier.drawWithContent用作

Text(
    modifier = if (blurText) {
        Modifier.blur(16.dp, BlurredEdgeTreatment.Unbounded)
    } else {
        Modifier.drawWithContent {
            drawContent()
            drawRect(Color.Black)
        }
    },
    text = "textToObfuscate",
    fontWeight = FontWeight.W700,
    fontSize = 16.sp,
)

在 Jetpack Compose 中使用修改器在文本上绘制形状

Draw shape over Text with Modifier in Jetpack Compose

text

blur

draw

android-jetpack-compose