Metinde Birden Fazla Stil

Figma, tasarımcıların tek bir metin öğesi içinde birden çok metin stili varyasyonu uygulamasına olanak tanır. Örneğin, aşağıdaki paketlenmiş Figma bileşeninde yer alan "Kahverengi" kelimesi, tek bir kelime içinde farklı metin boyutları da dahil olmak üzere çeşitli stilleri içeren tek bir metin öğesidir.

Tek bir metin öğesinde karışık metin stilleri

Geçiş, Figma metin katmanı içindeki alt dizelere uygulanan birden fazla metin stilinin tasarımdan koda çevirisini destekler. Oluşturulan kaynak kodunda, Metin katmanlarında birden fazla stili temsil etmek için Oluştur AnnotatedString ve SpanStyle simgeleri kullanılır.

Desteklenen stiller şunlardır:

  • yazı karakteri
  • metin boyutu
  • yazı tipi kalınlığı
  • renk
  • harf aralığı
  • italik
  • üstü çizili
  • altı çizili

Oluşturulan Compose kodunda Relay'in RelayText composable'ı String veya AnnotatedString öğelerini kabul edebilir. Geçiş, metin içinde birden çok stil oluşturmak için AnnotatedString.Builder ve SpanStyle sınıflarını kullanan Kotlin kodu oluşturur. Aşağıdaki kod parçasında, "atlamalar" kelimesine uygulanan geniş harf aralığı, ardından özel stili olmayan bir boşluk ve ardından kalın italik olarak "over" kelimesi gösterilmektedir.

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")
       }
       ...
   },
   ...
)

Sınırlamalar