Il componibile Text
ha più parametri facoltativi per definire lo stile dei suoi contenuti.
Di seguito sono elencati i parametri che riguardano i casi d'uso più comuni relativi al testo.
Per tutti i parametri di Text
, consulta il codice sorgente di Compose Text.
Ogni volta che imposti uno di questi parametri, applichi lo stile all'intero valore testuale. Se devi applicare più stili all'interno della stessa riga paragrafi, consulta la sezione sull'utilizzo di più punti stili.
Stili del testo comuni
Le seguenti sezioni descrivono i metodi più comuni per definire lo stile del testo.
Modificare il colore del testo
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Modificare la dimensione del testo
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
Applica il testo in corsivo
Utilizza il parametro fontStyle
per mettere il testo in corsivo (o imposta un altro
FontStyle
).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Mettere il testo in grassetto
Utilizza il parametro fontWeight
per applicare il grassetto al testo (o imposta un altro FontWeight
).
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
Aggiungi ombra
Il parametro style
consente di impostare un oggetto di tipo TextStyle
e configurare più parametri, ad esempio shadow.
Shadow
riceve un colore
per l'ombra, l'offset o la posizione rispetto a Text
e
il raggio di sfocatura, ovvero quanto appare sfocato.
@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 ) ) ) }
Aggiungere più stili al testo
Per impostare stili diversi all'interno dello stesso composable Text
, utilizza un AnnotatedString
,
una stringa che può essere annotata con stili di annotazioni arbitrari.
AnnotatedString
è una classe di dati contenente:
- Un valore
Text
- Un
List
diSpanStyleRange
, equivalente allo stile in linea con l'intervallo di posizione all'interno del valore del testo - Un elemento
List
diParagraphStyleRange
, che specifica l'allineamento del testo e il testo direzione, altezza della riga e stile per il rientro del testo
TextStyle
è da utilizzare
nel composable Text
, mentre SpanStyle
e ParagraphStyle
sono da utilizzare in AnnotatedString
. Per ulteriori informazioni su più stili in
un paragrafo, vedi Aggiungere più stili in un paragrafo.
AnnotatedString
dispone di un attributo di sicurezza per il tipo
Builder
per semplificare la creazione di: 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") } ) }
Attivare lo stile avanzato con Brush
Per attivare stili di testo più avanzati, puoi utilizzare l'API Brush
con
TextStyle
e SpanStyle
. In qualsiasi punto in cui in genere useresti TextStyle
o SpanStyle
, ora puoi utilizzare anche Brush
.
Usa un pennello per lo stile del testo
Configura il testo utilizzando un pennello integrato in TextStyle
. Ad esempio,
puoi configurare un pennello linearGradient
per il testo come segue:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
Non sei limitato a questa particolare combinazione di colori o stile di colore. Mentre
abbiamo fornito un semplice esempio per evidenziare, utilizzare una qualsiasi delle
pennelli o anche solo una SolidColor
per migliorare il testo.
Integrazioni
Poiché puoi utilizzare Brush
insieme a TextStyle
e SpanStyle
,
l'integrazione con TextField
e buildAnnotatedString
è semplice.
Per ulteriori informazioni sull'utilizzo dell'API Brush all'interno di un TextField
, consulta
Input di stile con l'API Brush.
Stili aggiuntivi con SpanStyle
Applicare un pennello a un intervallo di testo
Se vuoi applicare un pennello solo a parti del testo, utilizza buildAnnotatedString
e l'API SpanStyle
, insieme al pennello e al gradiente che preferisci.
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.") } )
Opacità in un intervallo di testo
Per regolare l'opacità di un determinato tratto di testo, utilizza il parametro facoltativo alpha
di SpanStyle
. Usa lo stesso pennello per
entrambe le parti di un testo e modificare il parametro alfa nell'intervallo corrispondente.
Nell'esempio di codice, il primo tratto di testo viene visualizzato con metà opacità (alpha =.5f
), mentre il secondo con opacità completa (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 ❤️") } }
Risorse aggiuntive
Per altri esempi di personalizzazione, consulta il post del blog Aggiornamento sul colore del testo in Scrivi. Se vuoi saperne di più su
come Brush
si integra con la nostra API Animations, vedi Pennello animato da colorare il testo
in Compose.
Applica l'effetto della cornice intermittente al testo
Puoi applicare il modificatore basicMarquee
a qualsiasi elemento componibile
per produrre un effetto di scorrimento animato. L'effetto sfarfallio si verifica se i contenuti sono troppo larghi per rientrare nei vincoli disponibili. Per impostazione predefinita, basicMarquee
ha
alcune configurazioni (come velocità e ritardo iniziale), ma puoi
modificare questi parametri per personalizzare l'effetto.
Lo snippet seguente implementa un effetto di tipo faretto di base su un composable Text
:
@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 ) } }
Figura 6. Modificatore basicMarquee
applicato al testo.
Consigliati per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Applicare uno stile al paragrafo
- Material Design 2 in Scrivi
- Modificatori di grafica