如何在Jetpack Compose中创建格式正确的项目符号列表

你可以通过AnnotatedString结合ParagraphStyle设置缩进，或者直接使用原生BulletSpan并转换为Compose兼容的AnnotatedString来解决这个问题，以下是两种可行方案：

方案一：用Compose原生ParagraphStyle实现 #

通过给每个列表项的项目符号和文本设置段落缩进，让换行后的内容自动对齐到项目符号右侧：

val disclosureText = buildAnnotatedString {
    // 列表项1
    // 给项目符号设置段落缩进（首行不缩进，后续行缩进16dp）
    addStyle(
        ParagraphStyle(
            indent = ParagraphIndent(
                firstLine = 0.sp,
                restLine = 16.sp
            )
        ),
        start = length,
        end = length + 1 // 仅覆盖项目符号"•"
    )
    append("• ")
    // 可以混合其他格式
    append("这是第一个列表项，")
    withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
        append("支持加粗")
    }
    append("、")
    withStyle(SpanStyle(fontStyle = FontStyle.Italic)) {
        append("斜体")
    }
    append("格式，内容较长时换行后会自动缩进对齐")
    append("\n")

    // 列表项2
    addStyle(
        ParagraphStyle(
            indent = ParagraphIndent(
                firstLine = 0.sp,
                restLine = 16.sp
            )
        ),
        start = length,
        end = length + 1
    )
    append("• ")
    append("这是第二个列表项，同样支持换行自动缩进，完全适配静态披露文本的排版需求")
}

// 在Text组件中使用
Text(
    text = disclosureText,
    modifier = Modifier.padding(horizontal = 16.dp),
    style = TextStyle(lineHeight = 22.sp)
)

方案二：使用原生BulletSpan兼容Compose #

原生BulletSpan可以直接生成带缩进的项目符号，只需将SpannableString转换为AnnotatedString即可在Compose的Text组件中使用：

// 先构建SpannableStringBuilder
val spannableBuilder = SpannableStringBuilder()

// 列表项1
val item1 = "这是第一个列表项，用原生BulletSpan实现，换行后自动保持缩进"
spannableBuilder.append(item1)
spannableBuilder.setSpan(
    BulletSpan(16.dp.toPx().toInt()), // 项目符号与文本的间距
    0,
    item1.length,
    Spanned.SPAN_INCLUSIVE_EXCLUSIVE
)
spannableBuilder.append("\n")

// 列表项2
val item2 = "这是第二个列表项，可与AnnotatedString的格式混合使用"
spannableBuilder.append(item2)
spannableBuilder.setSpan(
    BulletSpan(16.dp.toPx().toInt()),
    spannableBuilder.length - item2.length,
    spannableBuilder.length,
    Spanned.SPAN_INCLUSIVE_EXCLUSIVE
)

// 转换为Compose兼容的AnnotatedString
val annotatedText = spannableBuilder.toAnnotatedString()

// 渲染文本
Text(
    text = annotatedText,
    modifier = Modifier.padding(16.dp),
    style = TextStyle(lineHeight = 22.sp)
)

为什么之前的方法失效？ #

• 直接添加"•"字符时，没有设置后续行的缩进规则，导致换行内容顶格；
• 使用BulletSpan时如果未正确设置Span的覆盖范围，或者没有将SpannableString转换为AnnotatedString，Compose的Text组件无法识别原生Span。

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