文本中的多种样式

Figma 允许设计师在一个文本元素中应用多种文本样式变化。例如，下面打包的 Figma 组件中的“Brown”一词是一个包含多种样式的单个文本元素，包括一个单词内不同的文本大小。

Mixed text styles in a single text element

Relay 支持将应用于 Figma 文本图层子字符串的多种文本样式进行设计到代码的转换。在生成的源代码中，Compose 的 AnnotatedString 和 SpanStyle 用于表示文本图层中的多种样式。

支持的样式包括：

  • 字体
  • 文本大小
  • 字体粗细
  • 颜色
  • 字母间距
  • 斜体
  • 删除线
  • 下划线

在生成的 Compose 代码中，Relay 的 RelayText 可组合函数可以接受 String 或 AnnotatedString。Relay 生成使用 AnnotatedString.Builder 和 SpanStyle 类渲染文本中多种样式的 Kotlin 代码。以下代码片段显示了将宽字母间距应用于“jumps”一词，然后是没有任何自定义样式的空格，最后是粗体斜体的“over”一词。

RelayText(
   content = buildAnnotatedString {
       append("The ")
       ...
       withStyle(
           style = SpanStyle(
               letterSpacing = 8.64.sp,
           )
       ) { // AnnotatedString.Builder
           append("jumps")
       }
       append(" ")
       withStyle(
           style = SpanStyle(
               fontFamily = inter,
               fontSize = 32.0.sp,
               fontWeight = FontWeight(700.0.toInt()),
               fontStyle = FontStyle.Italic,
           )
       ) { // AnnotatedString.Builder
           append("over")
       }
       ...
   },
   ...
)

限制