如何在Jetpack Compose的buildAnnotatedString中为文本添加内边距/外边距

针对你需要的文本与背景间水平空隙、多段append内容间距的需求，有三种可直接落地的实现方式：

1. 高版本Compose官方原生实现 #

如果你使用 Compose Material3 1.2.0 及以上版本，SpanStyle 已经原生支持背景内边距配置，直接设置即可：

val spanStyle = MaterialTheme.typography.body1.copy(
    color = MaterialTheme.colorScheme.onSurface,
    fontWeight = FontWeight.W400,
    fontSize = 17.sp,
    letterSpacing = 0.25.sp,
    baselineShift = BaselineShift(0.2f),
    background = BackgroundStyle(
        color = MaterialTheme.colorScheme.surface,
        padding = PaddingValues(horizontal = 4.dp, vertical = 2.dp) // 调整数值控制空隙大小
    )
).toSpanStyle()

2. 低版本兼容自定义实现 #

如果使用低版本Compose，可以自定义扩展方法实现带内边距的背景样式：

@Composable
fun SpanStyle.withPaddedBackground(
    backgroundColor: Color,
    horizontalPadding: Dp = 4.dp,
    verticalPadding: Dp = 1.dp
): SpanStyle {
    val horizontalPaddingPx = LocalDensity.current.run { horizontalPadding.toPx() }
    return this.copy(
        drawStyle = DrawStyle(
            drawBehind = { _, bounds, _ ->
                drawRect(
                    color = backgroundColor,
                    topLeft = bounds.topLeft.copy(
                        x = bounds.left - horizontalPaddingPx
                    ),
                    size = bounds.size.copy(
                        width = bounds.width + horizontalPaddingPx * 2
                    )
                )
            }
        ),
        // 额外增加字符间距，避免相邻文本和背景重叠
        letterSpacing = letterSpacing + horizontalPadding
    )
}

使用时替换原来的background配置即可：

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

3. 多段append内容防背景粘连 #

如果是多次调用append添加不同的带背景文本，要避免背景连在一起，可以在两次append之间插入无样式的空白字符：

buildAnnotatedString {
    withStyle(style = spanStyle) {
        append("第一段带背景文本")
    }
    // 插入空白间隙，调整空格数量或者配合letterSpacing控制间距大小
    append("  ")
    withStyle(style = spanStyle) {
        append("第二段带背景文本")
    }
}

如果需要垂直方向的段间距，更推荐将不同段落拆分为多个独立的Text组件，通过Modifier.padding控制间距，实现成本比在AnnotatedString内处理更低。

内容的提问来源于stack exchange，提问作者Barrufet