Figma به طراحان اجازه میدهد تا چندین تغییر سبک متن را در یک عنصر متنی اعمال کنند. به عنوان مثال، کلمه "قهوه ای" در کامپوننت Figma بسته بندی شده زیر یک عنصر متن واحد است که شامل انواع سبک ها، از جمله اندازه های متن مختلف در یک کلمه است.
![سبک های متن مخلوط در یک عنصر متنی واحد](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/multiple-styles-in-text/mixed-text-styles.png?hl=fa)
Relay از ترجمه طرح به کد چندین سبک متنی که روی زیر رشته ها در لایه متن Figma اعمال می شود پشتیبانی می کند. در کد منبع تولید شده، از Compose's AnnotatedString
و SpanStyle
برای نمایش چندین سبک در لایه های متن استفاده می شود.
سبک های پشتیبانی شده عبارتند از:
- تایپ فیس
- اندازه متن
- وزن فونت
- رنگ
- فاصله حروف
- مورب
- ضربه از طریق
- زیر خط بکش
در کد Compose ایجاد شده، Relay's RelayText
composable می تواند String
یا AnnotatedString
را بپذیرد. Relay کد Kotlin را تولید میکند که از کلاسهای AnnotatedString.Builder
و SpanStyle
برای ارائه چندین سبک در متن استفاده میکند. قطعه کد زیر فاصله حروف گسترده ای را نشان می دهد که روی کلمه "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")
}
...
},
...
)
محدودیت ها
- ویژگی های Figma پشتیبانی نشده
- فاصله پاراگراف ها
- تورفتگی پاراگراف
- استایل اعداد
- فرم نامه ها
- ست های سبک
- خط زده و زیر خط بکشید
- ارتفاع خط (هنوز وقتی روی کل عنصر متن اعمال می شود کار می کند)
- اگر با یک سبک به پارامتر متن منتقل شود، چندین سبک حذف می شوند
برای شما توصیه می شود
- توجه: متن پیوند زمانی که جاوا اسکریپت خاموش است نمایش داده می شود
- متن سبک
- فعال کردن تعاملات کاربر
- پارامترها را اضافه کنید