Metnin stilini ayarlama

Text composable, içeriğinin stilini belirlemek için isteğe bağlı birden fazla parametreye sahiptir. Aşağıda, metinle en yaygın kullanım alanlarını kapsayan parametreler listelenmiştir. Text işlevinin tüm parametreleri için bkz. Metin Oluşturma kaynak kodundan kaynaklanabilir.

Bu parametrelerden birini ayarladığınızda stili tüm öğelere uygularsınız. metin değeri. Aynı satırda birden fazla stil uygulamanız gerekiyorsa veya varsa birden fazla satır içi Stil ayarları bölümüne bakın.

Sık kullanılan metin stilleri

Aşağıdaki bölümlerde, metninizi biçimlendirmek için sık kullanılan yöntemler açıklanmaktadır.

Metin rengini değiştir

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

Metin boyutunu değiştirme

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

Metni italik yap

Metni italik hale getirmek için fontStyle parametresini kullanın (veya başka bir parametre ayarlayın FontStyle) ekleyebilirsiniz.

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

Metni kalın yap

Metni kalın yapmak için fontWeight parametresini kullanın (veya başka bir FontWeight ayarlayın).

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

Gölge ekle

style parametresi, TextStyle türünde bir nesne ayarlamanıza olanak tanır ve gölge gibi birden fazla parametreyi yapılandırın. Shadow bir renk alır gölge, ofset veya Text ve anlamına gelir.

@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

Metne birden çok stil ekleme

Aynı Text içinde farklı stiller ayarlamak için composable, AnnotatedString kullanın, rastgele ek açıklama stilleriyle ek açıklama eklenebilen bir dizedir.

AnnotatedString, aşağıdakileri içeren bir veri sınıfıdır:

• Text değeri
• Konumla satır içi stile eşdeğer olan List/SpanStyleRange metin değeri içindeki aralık
• List/ParagraphStyleRange, metin hizalaması, metin belirtiliyor yön, satır yüksekliği ve metin girinti stili

TextStyle kullanım içindir Text composable'da, SpanStyle ve ParagraphStyle AnnotatedString içinde kullanım içindir. Şuradaki birden fazla stil hakkında daha fazla bilgi: Bir paragrafa birden çok stil ekleme bölümüne göz atın.

AnnotatedString, type-safe parametresini içeriyor derleyici kullanarak kolayca oluşturabilirsiniz: 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 ile gelişmiş stili etkinleştirin

Daha gelişmiş metin stilini etkinleştirmek için Brush API'yi aşağıdaki metinlerle birlikte kullanabilirsiniz: TextStyle ve SpanStyle. Genellikle her zaman TextStyle veya SpanStyle kullanıyorsanız artık Brush özelliğini de kullanabilirsiniz.

Metin stili için fırça kullan

TextStyle içinde yerleşik bir fırça kullanarak metninizi yapılandırın. Örneğin, metninize aşağıdaki gibi bir linearGradient fırçası yapılandırabilir:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Bu özel renk şeması veya renklendirme stiliyle sınırlı değilsiniz. Bu sırada yerleşik olarak bulunan, Google Drive'da yerleşik olarak bulunan fırça veya hatta SolidColor kullanarak metninizi iyileştirin.

Entegrasyonlar

Brush hem TextStyle hem de SpanStyle ile birlikte kullanılabildiğinden, TextField ve buildAnnotatedString ile entegrasyon sorunsuz.

Fırça API'sini TextField içinde kullanma hakkında daha fazla bilgi için bkz. Brush API ile stil girişi.

SpanStyle kullanılarak ek stil

Bir metin aralığına fırça uygulayın

Fırçayı yalnızca metninizin belirli kısımlarına uygulamak istiyorsanız buildAnnotatedString, SpanStyle API ve fırçanız karar vermemiz gerekir.

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

Metin aralığında opaklık

Belirli bir metnin opaklığını ayarlamak için SpanStyle kullanın isteğe bağlı alpha parametresidir. Şunlar için aynı fırçayı kullanın: ve ilgili aralıktaki alfa parametresini değiştirebilirsiniz. Kod örneğinde, metnin ilk aralığı yarı opaklıkta görüntülenir (alpha =.5f), ikincisi ise tam opaklıkta (alpha = 1f) görüntülenir.

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

Ek kaynaklar

Ek özelleştirme örnekleri için bkz. Oluşturma Metninin Ayrıntılarını Geliştirme Boyama konulu blog yayınımıza hoş geldiniz. Hakkında daha fazla bilgi almak isterseniz Brush öğesinin Animasyonlar API'miz ile nasıl entegre olduğunu görmek için Fırçayla animasyonla metin boyama başlıklı makaleyi inceleyin. girin.

Metne noktalı çerçeve efekti uygula

basicMarquee değiştiricisini istediğiniz composable'a uygulayabilirsiniz: Animasyonlu kaydırma efekti oluşturur. Noktalı çerçeve etkisi, içeriğin mevcut kısıtlamalara sığmayacak kadar geniş. Varsayılan olarak basicMarquee belirli yapılandırmalar (hız ve ilk gecikme gibi) ayarlanır, ancak bu parametreleri değiştirebilirsiniz.

Aşağıdaki snippet, Text composable'da temel bir noktalı çerçeve efekti uygular:

@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. Şekil. Metne uygulanan basicMarquee değiştiricisi.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Stil paragrafı
• Compose'da Materyal Tasarım 2
• Grafik Değiştiriciler

ziyaret edin.