Stile del testo

Il composable Text ha più parametri facoltativi per definire lo stile dei contenuti. Di seguito sono elencati i parametri che coprono i casi d'uso più comuni con il 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 del testo. Se devi applicare più stili all'interno della stessa riga o degli stessi paragrafi, consulta la sezione relativa ai più stili in linea.

Stili di testo comuni

Le sezioni seguenti descrivono i modi comuni per applicare stili al testo.

Modificare il colore del testo

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

Modificare la dimensione del testo

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

Mettere 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

Mettere il testo in grassetto

Utilizza il parametro fontWeight per applicare i grassetti al testo (o imposta un altro FontWeight).

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

Aggiungi ombra

Il parametro style consente di impostare un oggetto di tipo TextStyle e di 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 il grado di sfocatura.

@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

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 List di ParagraphStyleRange che specifica l'allineamento del testo, la direzione del testo, l'altezza della riga e lo stile del 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, consulta Aggiungere più stili in un paragrafo.

AnnotatedString ha un costruttore a prova di tipo per semplificarne la creazione: 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

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.

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 nel seguente modo:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Non sei limitato a questa particolare combinazione di colori o a questo stile di colorazione. Anche se abbiamo fornito un semplice esempio di evidenziazione, puoi utilizzare uno dei pennelli integrati o anche solo un 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.

Stile aggiuntivo utilizzando SpanStyle

Applicare un pennello a un tratto 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

Opacità in un tratto di testo

Per regolare l'opacità di un determinato tratto di testo, utilizza il parametro facoltativo alpha di SpanStyle. Utilizza lo stesso pennello per entrambe le parti di un testo e modifica il parametro alpha 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

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, consulta Colorazione del testo del pennello animato in Compose.

Applicare l'effetto faretto al testo

Puoi applicare il modificatore basicMarquee a qualsiasi composable 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 impostato determinate configurazioni (ad esempio 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. Il 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