Text
composable دارای چندین پارامتر اختیاری برای استایل دادن به محتوای آن است. در زیر، پارامترهایی را فهرست کردهایم که رایجترین موارد استفاده را با متن پوشش میدهند. برای همه پارامترهای Text
، به کد منبع نوشتن متن مراجعه کنید.
هر زمان که یکی از این پارامترها را تنظیم می کنید، سبک را برای کل مقدار متن اعمال می کنید. اگر نیاز به اعمال چندین سبک در یک خط یا پاراگراف دارید، به بخش چند سبک درون خطی مراجعه کنید.
سبک های متن رایج
بخشهای زیر روشهای رایج برای استایل دادن به متن را توضیح میدهند.
تغییر رنگ متن
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
تغییر اندازه متن
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
متن را ایتالیک کنید
از پارامتر fontStyle
برای ایتالیک کردن متن استفاده کنید (یا یک FontStyle
دیگر را تنظیم کنید).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
متن را پررنگ کنید
از پارامتر fontWeight
برای متن پررنگ استفاده کنید (یا یک FontWeight
دیگر تنظیم کنید).
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
سایه اضافه کنید
پارامتر style
به شما امکان می دهد یک شی از نوع TextStyle
را تنظیم کنید و چندین پارامتر، به عنوان مثال سایه را پیکربندی کنید. Shadow
با توجه به Text
و شعاع تاری که چقدر تار به نظر می رسد، رنگی برای سایه، افست یا جایی که قرار دارد دریافت می کند.
@Composable fun TextShadow() { val offset = Offset(5.0f, 10.0f) Text( text = "Hello world!", style = TextStyle( fontSize = 24.sp, shadow = Shadow( color = Color.Blue, offset = offset, blurRadius = 3f ) ) ) }
چند سبک در متن اضافه کنید
برای تنظیم سبکهای مختلف در یک Text
قابل ترکیب، از AnnotatedString
استفاده کنید، رشتهای که میتواند با سبکهای حاشیهنویسی دلخواه حاشیهنویسی شود.
AnnotatedString
یک کلاس داده است که شامل:
- یک مقدار
Text
-
List
ازSpanStyleRange
، معادل استایل درون خطی با محدوده موقعیت در مقدار متن -
List
ازParagraphStyleRange
، که چینش متن، جهت متن، ارتفاع خط و استایل تورفتگی متن را مشخص می کند.
TextStyle
برای استفاده در Text
composable است، در حالی که SpanStyle
و ParagraphStyle
برای استفاده در AnnotatedString
است. برای اطلاعات بیشتر در مورد چند سبک در یک پاراگراف، به افزودن چند سبک در یک پاراگراف مراجعه کنید.
AnnotatedString
دارای سازنده ایمن برای ایجاد آسان تر است: buildAnnotatedString
.
@Composable fun MultipleStylesInText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") } ) }
یک ظاهر طراحی پیشرفته را با Brush
فعال کنید
برای فعال کردن استایل متن پیشرفته تر، می توانید از Brush
API با TextStyle
و SpanStyle
استفاده کنید. در هر مکانی که معمولاً از TextStyle
یا SpanStyle
استفاده می کنید، اکنون می توانید از Brush
نیز استفاده کنید.
از یک قلم مو برای یک ظاهر طراحی متن استفاده کنید
متن خود را با استفاده از یک براش داخلی در TextStyle
پیکربندی کنید. به عنوان مثال، می توانید یک براش linearGradient
را به صورت زیر برای متن خود پیکربندی کنید:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
![استفاده از تابع «linearGradient» Brush API با فهرستی از رنگها.](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=2&hl=fa)
linearGradient
در Brush API با لیستی از رنگ ها تعریف شده است. شما محدود به این طرح رنگی خاص یا سبک رنگ آمیزی نیستید. در حالی که ما یک مثال ساده برای برجسته کردن ارائه کردهایم، از هر یک از براشهای داخلی یا حتی یک SolidColor
برای بهبود متن خود استفاده کنید.
ادغام ها
از آنجایی که میتوانید Brush
در کنار TextStyle
و SpanStyle
استفاده کنید، ادغام با TextField
و buildAnnotatedString
یکپارچه است.
برای اطلاعات بیشتر در مورد استفاده از brush API در یک TextField
، به Style input with Brush API مراجعه کنید.
یک ظاهر طراحی اضافی با استفاده از SpanStyle
یک قلم مو را روی یک بازه از متن اعمال کنید
اگر فقط میخواهید براش را روی قسمتهایی از متن خود اعمال کنید، از buildAnnotatedString
و SpanStyle
API به همراه براش و گرادیان انتخابی خود استفاده کنید.
Text( text = buildAnnotatedString { append("Do not allow people to dim your shine\n") withStyle( SpanStyle( brush = Brush.linearGradient( colors = rainbowColors ) ) ) { append("because they are blinded.") } append("\nTell them to put some sunglasses on.") } )
![استفاده از براش پیش فرض با linearGradient به عنوان یک سبک برای متن.](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=2&hl=fa)
linearGradient
به عنوان یک سبک برای Text
.کدورت در گستره ای از متن
برای تنظیم کدورت یک پهنای متن خاص، از پارامتر alpha
اختیاری SpanStyle
استفاده کنید. از یک قلم مو برای هر دو قسمت متن استفاده کنید و پارامتر آلفا را در بازه مربوطه تغییر دهید. در نمونه کد، بازه اول متن با نیمه کدورت ( alpha =.5f
) نمایش داده می شود در حالی که دهانه دوم با کدورت کامل ( alpha = 1f
) نمایش داده می شود.
val brush = Brush.linearGradient(colors = rainbowColors) buildAnnotatedString { withStyle( SpanStyle( brush = brush, alpha = .5f ) ) { append("Text in ") } withStyle( SpanStyle( brush = brush, alpha = 1f ) ) { append("Compose ❤️") } }
![با استفاده از buildAnnotatedString و پارامتر آلفای SpanStyle، به همراه linearGradient برای افزودن کدورت به گستره متن.](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=2&hl=fa)
buildAnnotatedString
و پارامتر آلفای SpanStyle
، همراه با linearGradient
برای افزودن کدورت به یک گستره متن.منابع اضافی
برای مثالهای سفارشیسازی بیشتر، به پست وبلاگ Brushing Up on Compose Text Coloring مراجعه کنید. اگر مایلید در مورد نحوه ادغام Brush
با Animations API بیشتر بدانید، Animating Brush Text Coloring در Compose را ببینید.
افکت خیمه شب بازی را روی متن اعمال کنید
میتوانید اصلاحکننده basicMarquee
را برای هر ترکیببندی برای ایجاد افکت اسکرول متحرک اعمال کنید. اگر محتوا بیش از حد گسترده باشد که در محدودیتهای موجود قرار نگیرد، اثر خیمهای رخ میدهد. به طور پیش فرض، basicMarquee
دارای تنظیمات خاصی (مانند سرعت و تاخیر اولیه) است، اما شما می توانید این پارامترها را برای سفارشی کردن افکت تغییر دهید.
قطعه زیر یک افکت مارکی اساسی را روی یک Text
composable پیاده سازی می کند:
@OptIn(ExperimentalFoundationApi::class) @Composable fun BasicMarqueeSample() { // Marquee only animates when the content doesn't fit in the max width. Column(Modifier.width(400.dp)) { Text( "Learn about why it's great to use Jetpack Compose", modifier = Modifier.basicMarquee(), fontSize = 50.sp ) } }
شکل 6. اصلاح کننده basicMarquee
روی متن اعمال می شود.
برای شما توصیه می شود
- توجه: متن پیوند زمانی که جاوا اسکریپت خاموش است نمایش داده می شود
- پاراگراف سبک
- Material Design 2 در Compose
- اصلاح کننده های گرافیکی