android - 使用 AnnotatedString 在文本之间添加小填充/边距

Question

每当我使用 buildAnnotatedString 时，我都必须使用 ParagraphStyle 或 SpanSTLye 编写某种样式。遗憾的是，这两个类都没有修饰符来在每个文本之间添加一些填充(附加)

这就是我现在得到的。 每个文本的开头和结尾的背景和字母之间应该有一个小空间:

这是带有背景的代码:

val spanStyle = (
    MaterialTheme.typography.body1.copy(
     color = MaterialTheme.colors.onSurface,
     fontWeight = FontWeight.W400,
     fontSize = 17.sp,
     letterSpacing = 0.25.sp,
     background = MaterialTheme.colors.surface,
     baselineShift = BaselineShift(0.2f),
)).toSpanStyle()

buildAnnotatedString {
    withStyle(style = spanStyle) {
         append("I write text here with background")
    }
}

我已经检查了 ParagraphStyle，但唯一与垂直空间相关的是 lineHeight，它显然会增加每行的高度，但不会增加它们之间的空间。

有没有办法在每个 append() 之间添加这个小空间，这样背景就不会耦合？

编辑:这是我现在拥有的:

这就是我要实现的，里面开始和结束的水平padding。 TextIndent 不起作用，因为开始背景和开始文本之间没有分隔。

Answer 1

我不认为这是可能的系统方法，但你可以手动绘制背景。

我在这里只添加示例代码，有关实现的更多详细信息，请参阅 this answer .

@Composable
fun TestScreen(
) {
    val baselineShiftMultiplier = 0.2f
    val lineHeightMultiplier = 1.7f
    val spanStyle = MaterialTheme.typography.body1.copy(
        color = MaterialTheme.colors.onSurface,
        fontWeight = FontWeight.W400,
        fontSize = 17.sp,
        letterSpacing = 0.25.sp,
        baselineShift = BaselineShift(baselineShiftMultiplier),
    )
    var selectedPartPaths by remember { mutableStateOf(Path()) }
    Text(
        buildAnnotatedString {
            withStyle(ParagraphStyle(lineHeight = spanStyle.fontSize * lineHeightMultiplier)) {
                append("I write text here\n")
                withStyle(style = spanStyle.toSpanStyle()) {
                    append("I write text here with background\n")
                    append("I write text here with background\n")
                }
                append("I write text here\n")
                withStyle(style = spanStyle.toSpanStyle()) {
                    append("I write text here with background\n")
                }
                append("I write text here\n")
            }
        },
        onTextLayout = { layoutResult ->
            selectedPartPaths = Path().apply {
                layoutResult.layoutInput.text.spanStyles.forEach { spanRange ->
                    val boundingBoxes = layoutResult
                        .getBoundingBoxesForRange(
                            start = spanRange.start,
                            end = spanRange.end
                        )
                    for (i in boundingBoxes.indices) {
                        val boundingBox = boundingBoxes[i]
                        addRect(
                            boundingBox.copy(
                                top = boundingBox.top + boundingBox.height * (1 - 1 / lineHeightMultiplier - baselineShiftMultiplier),
                            )
                        )
                    }
                }
            }
        },
        modifier = Modifier.drawBehind {
            drawPath(selectedPartPaths, style = Fill, color = Color.LightGray)
        }
    )
}

fun TextLayoutResult.getBoundingBoxesForRange(start: Int, end: Int): List<Rect> {
    var prevRect: Rect? = null
    var firstLineCharRect: Rect? = null
    val boundingBoxes = mutableListOf<Rect>()
    for (i in start..end) {
        val rect = getBoundingBox(i)
        val isLastRect = i == end

        // single char case
        if (isLastRect && firstLineCharRect == null) {
            firstLineCharRect = rect
            prevRect = rect
        }

        // `rect.right` is zero for the last space in each line
        // looks like an issue to me, reported: https://issuetracker.google.com/issues/197146630
        if (!isLastRect && rect.right == 0f) continue

        if (firstLineCharRect == null) {
            firstLineCharRect = rect
        } else if (prevRect != null) {
            if (prevRect.bottom != rect.bottom || isLastRect) {
                boundingBoxes.add(
                    firstLineCharRect.copy(right = prevRect.right)
                )
                firstLineCharRect = rect
            }
        }
        prevRect = rect
    }
    return boundingBoxes
}

结果: