متن سبک

Text composable دارای چندین پارامتر اختیاری برای استایل دادن به محتوای آن است. در زیر، پارامترهایی را فهرست کرده‌ایم که رایج‌ترین موارد استفاده را با متن پوشش می‌دهند. برای همه پارامترهای Text ، به کد منبع نوشتن متن مراجعه کنید.

هر زمان که یکی از این پارامترها را تنظیم می کنید، سبک را برای کل مقدار متن اعمال می کنید. اگر نیاز به اعمال چندین سبک در یک خط یا پاراگراف دارید، به بخش چند سبک درون خطی مراجعه کنید.

سبک های متن رایج

بخش‌های زیر روش‌های رایج برای استایل دادن به متن را توضیح می‌دهند.

تغییر رنگ متن

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

تغییر اندازه متن

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

متن را ایتالیک کنید

از پارامتر fontStyle برای ایتالیک کردن متن استفاده کنید (یا یک FontStyle دیگر را تنظیم کنید).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

متن را پررنگ کنید

از پارامتر fontWeight برای متن پررنگ استفاده کنید (یا یک FontWeight دیگر تنظیم کنید).

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

سایه اضافه کنید

پارامتر 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
            )
        )
    )
}
TextSnippets.kt

چند سبک در متن اضافه کنید

برای تنظیم سبک‌های مختلف در یک 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")
        }
    )
}
TextSnippets.kt

یک ظاهر طراحی پیشرفته را با 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
        )
    )
)
TextSnippets.kt

شما محدود به این طرح رنگی خاص یا سبک رنگ آمیزی نیستید. در حالی که ما یک مثال ساده برای برجسته کردن ارائه کرده‌ایم، از هر یک از براش‌های داخلی یا حتی یک 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.")
    }
)
TextSnippets.kt

کدورت در گستره ای از متن

برای تنظیم کدورت یک پهنای متن خاص، از پارامتر 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 ❤️")
    }
}
TextSnippets.kt

منابع اضافی

برای مثال‌های سفارشی‌سازی بیشتر، به پست وبلاگ 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
        )
    }
}
TextSnippets.kt

شکل 6. اصلاح کننده basicMarquee روی متن اعمال می شود.

{% کلمه به کلمه %} {% آخر کلمه %}

توصیه شده برای شما

• توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
• پاراگراف سبک
• Material Design 2 در Compose
• اصلاح کننده های گرافیکی

{% کلمه به کلمه %} {% آخر کلمه %}