在Jetpack Compose中如何像CSS一样为多元素创建并应用样式？

1. 自定义复用StyledText组件（最推荐） #

把共用的样式封装成一个自定义Compose组件，每次直接调用即可完全避免重复代码，效果类似CSS的类：

@Composable
fun StyledText(text: String) {
    Text(
        text = text,
        modifier = Modifier.padding(8.dp), // 统一padding
        color = Color.Gray, // 统一文字颜色
        fontSize = 14.sp, // 统一字号
        // 可添加更多共用样式，比如fontWeight、letterSpacing等
    )
}

替换原有代码中的Text：

Row{
    for(i in 1..7) StyledText(stuff[i-1])
}
Row{
    for(i in 8..15) StyledText(stuff[i-1])
}
Row{
    for(i in 16..23) StyledText(stuff[i-1])
}
Row{
    for(i in 24..30) StyledText(stuff[i-1])
}

如果个别Text需要额外样式，可给组件扩展参数：

@Composable
fun StyledText(
    text: String,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default
) {
    Text(
        text = text,
        modifier = Modifier.padding(8.dp).then(modifier),
        color = Color.Gray,
        fontSize = 14.sp,
        style = style.merge(TextStyle(color = Color.Gray, fontSize = 14.sp))
    )
}

2. 提取共用的Modifier和TextStyle常量 #

如果不想自定义组件，可把共用样式提取为常量，使用时直接引用：

// 定义共用的样式常量
val commonTextModifier = Modifier.padding(8.dp)
val commonTextStyle = TextStyle(
    color = Color.Gray,
    fontSize = 14.sp
)

在Text中使用：

Row{
    for(i in 1..7) Text(stuff[i-1], modifier = commonTextModifier, style = commonTextStyle)
}
Row{
    for(i in 8..15) Text(stuff[i-1], modifier = commonTextModifier, style = commonTextStyle)
}

这种方式适合灵活调整个别Text样式的场景，比如给某个Text加点击事件：commonTextModifier.then(Modifier.clickable { /* 逻辑 */ })

3. 使用CompositionLocal实现局部/全局样式统一 #

如果需要在某个局部范围（比如整个页面）统一样式，且不想每次传参数，可使用CompositionLocal：

// 定义CompositionLocal容器
val LocalCommonTextModifier = compositionLocalOf { Modifier }
val LocalCommonTextStyle = compositionLocalOf { TextStyle.Default }

在父组件中注入样式：

CompositionLocalProvider(
    LocalCommonTextModifier provides Modifier.padding(8.dp),
    LocalCommonTextStyle provides TextStyle(color = Color.Gray, fontSize = 14.sp)
) {
    // 所有需要统一样式的Row都放在这里
    Row{
        for(i in 1..7) Text(stuff[i-1], modifier = LocalCommonTextModifier.current, style = LocalCommonTextStyle.current)
    }
    Row{
        for(i in 8..15) Text(stuff[i-1], modifier = LocalCommonTextModifier.current, style = LocalCommonTextStyle.current)
    }
    // 其他Row...
}

这种方式适合全局或大范围的样式统一，子组件无需显式传递样式参数，直接通过current获取。

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