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) }
Metin boyutunu değiştirme
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
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) }
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) }
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 ) ) ) }
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") } ) }
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 ) ) )
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.") } )
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 ❤️") } }
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 ) } }
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