摘要
在 Android 应用开发中，我们经常需要为文本中的特定词汇添加视觉突出效果，例如带背景填充和边框的样式。对于像给每个单词 添加圆角边框和自定义前景色 这样的复杂富文本需求，传统的 AnnotatedString 或 Span 机制难以完美实现。
本方案将介绍如何在 Jetpack Compose 中，通过 "分词 + 流式布局（Flow Layout）+ Modifiers" 的组合拳，优雅且精确地实现这种效果，同时解决英文缩写词（如 I'm）和标点符号的准确分离问题。
一、方案选择：为什么不用 AnnotatedString？
在 Compose 中，虽然我们可以使用 AnnotatedString 来定义文字的样式（如 SpanStyle），但它存在局限性：
- 无法实现圆角边框：
AnnotatedString只能通过background属性设置矩形背景色，无法添加圆角或边框。 - 布局控制不足： 复杂的内边距（Padding）和外边距（Margin）难以精确控制，这对于实现单词之间的清晰分隔至关重要。
因此，最符合 Compose 设计理念且效果最好的方案是：将文本拆分成独立的 Composable (TextView) 。
二、核心技术方案：分词 + Flow Layout
我们采用的方案类似于传统 View 系统中的 "多 TextView + FlowLayout" ，但在 Compose 中实现更加简洁。
1. 布局结构
为了让单词能够像普通文本一样自动换行，我们使用一个支持流式布局的 Composable，例如 Google 官方库的 FlowRow（或社区版本）。
Kotlin
arduino
// 假设已引入 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
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
ini
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 组件。这种方法不仅实现了图片中所示的圆角边框效果，还解决了英文分词中的缩写词和标点符号处理的难题，是实现高度定制化文本样式需求的优秀实践。