android - 撰写中的 ColorTrackText

Question

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

Answer 1

使用Modifier.drawWithContent和 clipRect您只能绘制 View 的部分内容。然后，您需要将两个相同的 Text 放入 Box 中，并绘制每个 View 所需的部分:

@Composable
fun TwoColorText(
    text: String,
    color1: Color,
    color2: Color,
    part: Float,
    modifier: Modifier = Modifier,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) {
    val textView = @Composable { color: Color, leftMultiplier: Float, rightMultiplier: Float ->
        Text(
            text,
            color = color,
            fontSize = fontSize,
            fontStyle = fontStyle,
            fontWeight = fontWeight,
            fontFamily = fontFamily,
            letterSpacing = letterSpacing,
            textDecoration = textDecoration,
            textAlign = textAlign,
            lineHeight = lineHeight,
            overflow = overflow,
            softWrap = softWrap,
            maxLines = maxLines,
            onTextLayout = onTextLayout,
            style = style,
            modifier = Modifier.drawWithContent {
                clipRect(
                    left = size.width * leftMultiplier,
                    right = size.width * rightMultiplier
                ) {
                    <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9e828399aa8e988b9dbd839e82a985849e8f849ec48e988b9da985849e8f849e" rel="noreferrer noopener nofollow">[email protected]</a>()
                }
            }
        )
    }
    Box(modifier) {
        textView(color1, 0f, part)
        textView(color2, part, 1f)
    }
}

用法:

Row(Modifier.padding(10.dp)) {
    TwoColorText(
        "新鲜",
        color1 = Color.Black,
        color2 = Color.Red,
        part = 0.27f,
    )
    Spacer(modifier = Modifier.width(50.dp))
    TwoColorText(
        "消息",
        color1 = Color.Black,
        color2 = Color.Red,
        part = 0.27f,
    )
}

结果: