Stile del testo

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)
}
TextSnippets.kt

Le parole

Modificare la dimensione del testo

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

Le parole

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)
}
TextSnippets.kt

Le parole

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)
}
TextSnippets.kt

Le parole

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
            )
        )
    )
}
TextSnippets.kt

Le parole

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 di SpanStyleRange, equivalente allo stile in linea con l'intervallo di posizione all'interno del valore del testo
  • Un elemento List di ParagraphStyleRange, 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")
        }
    )
}
TextSnippets.kt

Le parole

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
        )
    )
)
TextSnippets.kt

Utilizzo della funzione "linearGradient" dell'API Brush con un elenco definito di colori.
Figura 2. Utilizzo della funzione linearGradient dell'API Brush con un elenco definito di colori.

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.")
    }
)
TextSnippets.kt

Utilizzo di un pennello predefinito con linearGradient come stile per il testo.
Figura 4. Utilizzo di un pennello predefinito con linearGradient come stile per Text.
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 ❤️")
    }
}
TextSnippets.kt

Utilizza il parametro alpha di buildAnnotatedString e SpanStyle, insieme a linearGradient per aggiungere opacità a un tratto di testo.
Figura 5. Utilizzando il parametro alpha di buildAnnotatedString e SpanStyle, insieme a linearGradient per aggiungere opacità a un tratto di testo.

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
        )
    }
}
TextSnippets.kt

Figura 6. Modificatore basicMarquee applicato al testo.