Jetpack Compose 中实现带圆角边框的单词级富文本效果（分词与布局实践）

摘要

在 Android 应用开发中，我们经常需要为文本中的特定词汇添加视觉突出效果，例如带背景填充和边框的样式。对于像给每个单词 添加圆角边框和自定义前景色 这样的复杂富文本需求，传统的 AnnotatedString 或 Span 机制难以完美实现。

本方案将介绍如何在 Jetpack Compose 中，通过 "分词 + 流式布局（Flow Layout）+ Modifiers" 的组合拳，优雅且精确地实现这种效果，同时解决英文缩写词（如 I'm）和标点符号的准确分离问题。

---

一、方案选择：为什么不用 AnnotatedString？

在 Compose 中，虽然我们可以使用 AnnotatedString 来定义文字的样式（如 SpanStyle），但它存在局限性：

1. 无法实现圆角边框： AnnotatedString 只能通过 background 属性设置矩形背景色，无法添加圆角或边框。
2. 布局控制不足： 复杂的内边距（Padding）和外边距（Margin）难以精确控制，这对于实现单词之间的清晰分隔至关重要。

因此，最符合 Compose 设计理念且效果最好的方案是：将文本拆分成独立的 Composable (TextView) 。

---

二、核心技术方案：分词 + Flow Layout

我们采用的方案类似于传统 View 系统中的 "多 TextView + FlowLayout" ，但在 Compose 中实现更加简洁。

1. 布局结构

为了让单词能够像普通文本一样自动换行，我们使用一个支持流式布局的 Composable，例如 Google 官方库的 FlowRow（或社区版本）。

Kotlin

// 假设已引入 com.google.accompanist.flowlayout.FlowRow
FlowRow(
    mainAxisSpacing = 4.dp, // 单词间的水平间距
    crossAxisSpacing = 4.dp, // 行间距
) {
    // 遍历 tokens，对每个单词应用 Box + Modifier
}

2. 单个单词的视觉实现

每个需要边框的单词都由一个 Box Composable 承载，利用 Modifier 来实现视觉效果：

• Modifier.border() ：绘制圆角边框。
• Modifier.background() ：填充背景色。
• Modifier.padding() ：提供文字与边框之间的内边距。

---

三、关键挑战：精确分词与标点分离

简单地用空格切割 (split(" ")) 会导致标点符号被包含在框内或单独成框。同时，必须确保 I'm、don't 或 life-long 这种缩写词和复合词被视为一个整体。

我们使用一个强大的正则表达式函数来解决这个问题：

1. 分词函数 getDisplayTokens

此函数负责将句子切割成单词 和标点符号 的列表，同时忽略它们之间的空格。

Kotlin

fun getDisplayTokens(sentence: String): List<String> {
    // [.,!?;:()] 匹配标点符号
    // [\w'-]+ 匹配单词（包括字母、数字、下划线、撇号 ' 和连字符 -）
    val regex = "([.,!?;:()])|([\w'-]+)".toRegex()
    
    return regex.findAll(sentence)
        .map { it.value } // 提取匹配到的文本
        .toList()
}

效果验证：

输入：I'm learning life-long skills.

输出：["I'm", "learning", "life-long", "skills", "."]

可以看到，I'm 和 life-long 被正确识别为一个整体，标点符号 . 也被分离。

---

四、完整的 Compose 实现代码

结合分词逻辑和 Composable 布局，最终的实现代码如下：

Kotlin

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
// 需引入 Flow Layout 库，例如：
// import com.google.accompanist.flowlayout.FlowRow 
// (示例使用 Row 替代，实际请使用 FlowRow)

val BorderColor = Color(0xFF00796B) 
val BackgroundFillColor = Color(0xFFE0F7FA)
val CornerRadius = 6.dp
val BorderWidth = 1.dp
val ItemSpacing = 4.dp
val TextPadding = 8.dp

@Composable
fun WordBorderRichText(fullText: String) {
    val tokens = getDisplayTokens(fullText)
    
    // 实际应用请使用 FlowRow 或 FlexboxLayout 替代 Row/Column
    androidx.compose.foundation.layout.Row(
        modifier = Modifier.padding(16.dp) 
    ) {
        tokens.forEach { token ->
            // 重新验证是否为单词，以便区分标点符号
            val isWord = token.matches("[\w'-]+".toRegex())
            
            if (isWord) {
                // --- 单词：应用边框、背景和前景色 ---
                Box(
                    modifier = Modifier
                        .padding(end = ItemSpacing) // 单词间的右间距
                        .padding(horizontal = TextPadding, vertical = 4.dp) // 内边距
                        .border(
                            width = BorderWidth,
                            color = BorderColor,
                            shape = RoundedCornerShape(CornerRadius)
                        )
                        .background(
                            color = BackgroundFillColor,
                            shape = RoundedCornerShape(CornerRadius)
                        )
                ) {
                    // 设置前景色（文字颜色）
                    Text(text = token, color = BorderColor) 
                }
            } else {
                // --- 标点符号：只显示文字（无边框、无背景） ---
                Text(
                    text = token,
                    color = Color.Black, // 标点符号的前景色
                    modifier = Modifier.padding(end = 0.dp) // 标点符号后通常没有间距
                )
            }
        }
    }
}

总结

通过 Jetpack Compose 的 Modifier 链式调用 能力和 精确的正则表达式分词，我们成功地将复杂的单词级富文本效果分解成了清晰、可维护的 Composable 组件。这种方法不仅实现了图片中所示的圆角边框效果，还解决了英文分词中的缩写词和标点符号处理的难题，是实现高度定制化文本样式需求的优秀实践。