Metnin stilini ayarlama

Text composable, içeriğinin stilini belirlemek için isteğe bağlı birden fazla parametreye sahiptir. Aşağıda, en yaygın kullanım alanlarını metinle kapsayan parametreleri listeledik. 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 veya paragraflarda birden fazla stil uygulamanız gerekiyorsa birden fazla satır içi stil ile ilgili bölüme 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ştirme

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

Kelimeler

Metin boyutunu değiştirme

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

Kelimeler

Metni italik yapma

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

Kelimeler

Metni kalın yapma

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

Kelimeler

Gölge ekleme

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

Kelimeler

Metne birden çok stil ekleme

Aynı Text içinde farklı stiller ayarlamak için composable, kullanın bir AnnotatedString, 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, Text bileşeninde, SpanStyle ve ParagraphStyle ise AnnotatedString'de kullanılır. Birden fazla stil hakkında daha fazla bilgi için 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

Kelimeler

Brush ile gelişmiş stili etkinleştirin

Daha gelişmiş metin stillerini etkinleştirmek için Brush API'yi TextStyle ve SpanStyle ile kullanabilirsiniz. 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

Brush API'nin "linearGradient" işlevini tanımlanmış bir renk listesiyle kullanma.
Şekil 2. Brush API'nin linearGradient işlevini, tanımlanmış bir renk listesiyle kullanma.

Bu özel renk şeması veya renklendirme stiliyle sınırlı değilsiniz. Vurgulamak için basit bir örnek sağladık ancak metninizi geliştirmek için yerleşik fırçalardan herhangi birini veya hatta sadece bir SolidColor kullanabilirsiniz.

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 kullanarak 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 stili olarak DoğrusalGradient ile varsayılan bir fırça kullanılıyor.
Şekil 4. Text için stil olarak linearGradient ile varsayılan bir fırça kullanılıyor.
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

Bir metin kapsamına opaklık eklemek için buildAnnotatedString ve SpanStyle'ın alfa parametresiyle birlikte DoğrusalGradient kullanılması.
Şekil 5. Bir metin kapsamına şeffaflık eklemek için buildAnnotatedString ve SpanStyle ürününün alfa parametresi ile linearGradient birlikte kullanılması.

Ek kaynaklar

Daha fazla özelleştirme örneği için Metin Oluşturma Renklendirmesi ile İlgili Bilgiler başlıklı blog yayınını inceleyin. 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şturabilir. Noktalı çerçeve etkisi, içeriğin mevcut kısıtlamalara sığmayacak kadar geniş. Varsayılan olarak basicMarquee'te belirli yapılandırmalar (ör. hız ve ilk gecikme) ayarlanmıştır ancak efekti özelleştirmek için bu parametreleri değiştirebilirsiniz.

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

@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.