如何通过点击为文本添加下划线？Jetpack Compose问题求助

安全阿岳

2026-7-5

解决Jetpack Compose中点击切换下划线颜色变量不更新的问题

问题场景

在Jetpack Compose里尝试通过onClick事件，让$item对应的文本下划线切换颜色：用Divider实现下划线，默认设为bgwhite，点击时改为neonblue，但控制颜色的变量underlineonclick始终无法更新，UI没有响应变化。

生效解决方案（@BenjyTec 提供）

核心问题

未使用Compose的状态管理API，普通变量更新无法触发UI重组，导致颜色变化无法同步到界面。

代码调整示例

错误写法（普通变量无状态感知）

// 错误：普通变量更新不会触发Compose重组
var underlineonclick = Color.bgwhite

Text(
    text = item,
    onClick = {
        underlineonclick = Color.neonblue
    }
)
Divider(color = underlineonclick)

正确写法（使用状态管理API）

// 正确：用mutableStateOf让变量具备状态感知能力，更新时自动触发重组
val underlineColor = remember { mutableStateOf(Color.bgwhite) }

Text(
    text = item,
    onClick = {
        underlineColor.value = Color.neonblue
    }
)
Divider(color = underlineColor.value)

关键说明

驱动UI变化的变量必须用Compose的状态容器（如mutableStateOf、rememberSaveable）包裹，这样变量值更新时才会触发界面重组，刷新UI。
remember用于在重组过程中保留状态值，避免每次重组都重置变量；如果需要在配置变化（如屏幕旋转）后保留状态，可替换为rememberSaveable。