L'elemento componibile Text
ha più parametri facoltativi per definire i suoi contenuti.
Di seguito, abbiamo elencato i parametri che coprono i casi d'uso più comuni con testo.
Per tutti i parametri di Text
, consulta Scrivi codice sorgente.
Ogni volta che imposti uno di questi parametri, applichi lo stile all'intero valore di testo. Se devi applicare più stili all'interno della stessa riga o dello stesso paragrafo, consulta la sezione su più stili incorporati.
Stili di testo comuni
Le seguenti sezioni descrivono i metodi più comuni per applicare uno stile al testo.
Modifica 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) }
Corsivo per il testo
Utilizza il parametro fontStyle
per mettere in corsivo il testo (o imposta un altro parametro
FontStyle
).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Formatta il testo in grassetto
Utilizza il parametro fontWeight
per applicare il grassetto ai testi (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 al valore Text
e
il raggio di sfocatura, che equivale al livello di sfogo dell'immagine.
@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 Text
componibile, utilizza AnnotatedString
,
una stringa che può essere annotata con stili di annotazioni arbitrarie.
AnnotatedString
è una classe di dati che contiene:
- Un valore
Text
- Un
List
diSpanStyleRange
, equivalente agli stili incorporati con intervallo di posizione all'interno del valore di testo - Un
List
diParagraphStyleRange
, che specifica allineamento del testo, direzione del testo, altezza della riga e stile del rientro del testo
TextStyle
deve essere utilizzato
nel componibile Text
, mentre SpanStyle
e ParagraphStyle
viene utilizzato in AnnotatedString
. Per ulteriori informazioni su più stili in un paragrafo, vedi Aggiungere più stili in un paragrafo.
AnnotatedString
ha uno strumento di creazione tipo-safe 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") } ) }
Attiva gli stili avanzati con Brush
Per attivare stili di testo più avanzati, puoi utilizzare l'API Brush
con
TextStyle
e SpanStyle
. Ora puoi usare anche Brush
in qualsiasi luogo in cui in genere utilizzi TextStyle
o SpanStyle
.
Utilizzare 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. Abbiamo fornito un semplice esempio da mettere in evidenza. Per migliorare il testo, puoi utilizzare uno qualsiasi dei pennelli integrati o persino un elemento SolidColor
.
Integrazioni
Poiché puoi utilizzare Brush
insieme a TextStyle
e SpanStyle
,
l'integrazione con TextField
e buildAnnotatedString
è perfetta.
Per saperne di più sull'utilizzo dell'API Brush in un elemento TextField
, consulta
Input di stile con l'API Brush.
Stili aggiuntivi con SpanStyle
Applica un pennello a un intervallo di testo
Se vuoi applicare un pennello solo a parti del testo, usa buildAnnotatedString
e l'API SpanStyle
, oltre 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 intervallo di testo, utilizza il parametro facoltativo alpha
di SpanStyle
. Usa lo stesso pennello per entrambe le parti di un testo e modifica il parametro alfa nell'intervallo corrispondente.
Nell'esempio di codice, il primo intervallo di testo viene visualizzato con un'opacità dimezzata (alpha =.5f
), mentre il secondo con un'opacità massima (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 ulteriori esempi di personalizzazione, consulta il post del blog Sfiorare la scrittura del testo. Se vuoi saperne di più su come Brush
si integra con la nostra API Animations, consulta Animazione della colorazione del testo del pennello in Compose.
Applicare l'effetto della cornice intermittente al testo
Puoi applicare il modificatore basicMarquee
a qualsiasi componibile per generare un effetto di scorrimento animato. L'effetto testo limitato si verifica se i contenuti
sono troppo ampi per rientrare nei vincoli disponibili. Per impostazione predefinita, per basicMarquee
sono impostate determinate configurazioni (come velocità e ritardo iniziale), ma puoi modificare questi parametri per personalizzare l'effetto.
Lo snippet seguente implementa un effetto di selezione di base su un componibile Text
:
@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 ) } }
Figura 6. Modificatore basicMarquee
applicato al testo.
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Stile paragrafo
- Material Design 2 in Compose
- Modificatori grafici