撰写中的 ColorTrackText

Question

我想写这种类型的文字，可以吗？

Answer 1

使用Modifier.drawWithContentandclipRect只能绘制视图的部分内容。然后你需要将两个相同的放入Texta 中Box并绘制每个视图所需的部分：

\n

@Composable\nfun TwoColorText(\n    text: String,\n    color1: Color,\n    color2: Color,\n    part: Float,\n    modifier: Modifier = Modifier,\n    fontSize: TextUnit = TextUnit.Unspecified,\n    fontStyle: FontStyle? = null,\n    fontWeight: FontWeight? = null,\n    fontFamily: FontFamily? = null,\n    letterSpacing: TextUnit = TextUnit.Unspecified,\n    textDecoration: TextDecoration? = null,\n    textAlign: TextAlign? = null,\n    lineHeight: TextUnit = TextUnit.Unspecified,\n    overflow: TextOverflow = TextOverflow.Clip,\n    softWrap: Boolean = true,\n    maxLines: Int = Int.MAX_VALUE,\n    onTextLayout: (TextLayoutResult) -> Unit = {},\n    style: TextStyle = LocalTextStyle.current\n) {\n    val textView = @Composable { color: Color, leftMultiplier: Float, rightMultiplier: Float ->\n        Text(\n            text,\n            color = color,\n            fontSize = fontSize,\n            fontStyle = fontStyle,\n            fontWeight = fontWeight,\n            fontFamily = fontFamily,\n            letterSpacing = letterSpacing,\n            textDecoration = textDecoration,\n            textAlign = textAlign,\n            lineHeight = lineHeight,\n            overflow = overflow,\n            softWrap = softWrap,\n            maxLines = maxLines,\n            onTextLayout = onTextLayout,\n            style = style,\n            modifier = Modifier.drawWithContent {\n                clipRect(\n                    left = size.width * leftMultiplier,\n                    right = size.width * rightMultiplier\n                ) {\n                    this@drawWithContent.drawContent()\n                }\n            }\n        )\n    }\n    Box(modifier) {\n        textView(color1, 0f, part)\n        textView(color2, part, 1f)\n    }\n}\n

\n

用法：

\n

Row(Modifier.padding(10.dp)) {\n    TwoColorText(\n        "\xe6\x96\xb0\xe9\xb2\x9c",\n        color1 = Color.Black,\n        color2 = Color.Red,\n        part = 0.27f,\n    )\n    Spacer(modifier = Modifier.width(50.dp))\n    TwoColorText(\n        "\xe6\xb6\x88\xe6\x81\xaf",\n        color1 = Color.Black,\n        color2 = Color.Red,\n        part = 0.27f,\n    )\n}\n

\n

结果：

\n

\n