跳转到内容

文本样式

本页基于实际实现,完整列出 COUI 提供的文本样式。

使用方式

  • 在组合函数中通过 COUITheme.textStyles.<名称> 访问。
  • 所有样式的颜色会在运行时由 COUITheme.colorScheme.onBackground 统一设置。

样式列表

行高来自 COUI 各 couiTextAppearance*lineSpacingMultiplier,取 values-v35 下的值(ColorOS 16 生效的资源桶)。

样式名字号字重行高对应 COUI 样式
main17spNormal1.158emcouiTextAppearanceHeadline6
paragraph17spNormal1.158emcouiTextAppearanceBodyL
body116spNormal1.158emcouiTextAppearanceBodyL
body214spNormal1.2245emcouiTextAppearanceBody
button16spMedium1.263emcouiTextAppearanceButtonL
footnote113spNormal1.2245emcouiTextAppearanceBody
footnote211spNormal1.143emcouiTextAppearanceDescription
headline116spNormal1.158emcouiTextAppearanceHeadline6
headline216spNormal1.158emcouiTextAppearanceHeadline6
subtitle14spBold1.2245emcouiTextAppearanceBody
title132spNormal1.2322emcouiTextAppearanceHeadline1
title224spNormal1.2emcouiTextAppearanceHeadline3
title320spNormal1.1831emcouiTextAppearanceHeadline4
title418spNormal1.2381emcouiTextAppearanceHeadline5

提示

COUI 没有 11sp / 13sp / 17sp 这三档 text appearance,这几个样式取的是字号最接近的那一档的行高倍数。headline1 是唯一靠真机实测定标的:ColorOS 16 在 560dpi 下的列表项标题节点高 21.71dp,对应 16sp,而不是从 Miuix 继承的 17sp。

所有样式都带 LineHeightStyle(alignment = Top, trim = None),以对应 Android lineSpacingMultiplier 的行为:额外行距落在文字下方且不被裁剪。Compose 默认会把行距居中并在首尾行裁掉,那样单行文本上的行高设置会完全失效。

使用示例

kotlin
Text(
    text = "标题",
    style = COUITheme.textStyles.title2
)

Text(
    text = "正文",
    style = COUITheme.textStyles.body1
)

自定义

  • 通过 defaultTextStyles(...) 覆盖样式,并传入 COUITheme(textStyles = ...)
kotlin
val customTextStyles = defaultTextStyles(
    title1 = TextStyle(
        fontSize = 36.sp,
        fontWeight = FontWeight.Bold
    )
)

val controller = remember { ThemeController(ColorSchemeMode.System) }
COUITheme(
    controller = controller,
    textStyles = customTextStyles
) { /* 内容 */ }

变更日志

基于 Apache-2.0 许可发布