Android Compose中点击可点击文本动态切换textDecoration的实现问题

开发者阿泽

2026-10-5

核心问题原因

你原来的mutableListOf是普通集合，修改后不会触发Compose重组，所以UI不会同步更新样式。改用Compose提供的可观察状态集合即可解决。

完整实现步骤

替换选中集合为可观察状态集合
```
// 记得导入 androidx.compose.runtime.mutableStateListOf
val tagsSelected = remember { mutableStateListOf<String>() }
```
这里用remember保证重组时状态不丢失，mutableStateListOf的增删操作会自动触发UI重组。

给Text控件添加动态textDecoration属性
直接判断当前标签是否在选中集合中，动态赋值即可：

Text(
    text = "tech",
    textDecoration = if ("tech" in tagsSelected) TextDecoration.Underline else TextDecoration.None,
    modifier = Modifier
        .clickable {
            if ("tech" in tagsSelected) {
                tagsSelected.remove("tech")
            } else {
                tagsSelected.add("tech")
            }
        }
        .padding(5.dp)
)

多标签优化方案（避免重复手写每个Text）
如果你有大量标签，可以把标签存成列表统一遍历生成，适配一行滚动布局的场景，代码更简洁：

// 所有可选标签列表
val allTags = listOf("tech", "news", "sports", "entertainment", "finance")
val tagsSelected = remember { mutableStateListOf<String>() }

// 一行可滚动布局示例
Row(
    modifier = Modifier.horizontalScroll(rememberScrollState())
) {
    allTags.forEach { tag ->
        Text(
            text = tag,
            textDecoration = if (tag in tagsSelected) TextDecoration.Underline else TextDecoration.None,
            modifier = Modifier
                .clickable {
                    if (tag in tagsSelected) tagsSelected.remove(tag) else tagsSelected.add(tag)
                }
                .padding(5.dp)
        )
    }
}