Stile del testo

Il composable Text ha più parametri facoltativi per applicare uno stile ai 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 paragrafi, consulta la sezione relativa a più stili in linea styles.

Stili di testo comuni

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

Modifica colore del testo

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

Modifica dimensione del testo

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

Metti il testo in corsivo

Utilizza il parametro fontStyle per mettere il testo in corsivo (o impostare un altro FontStyle).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

Metti il testo in grassetto

Utilizza il parametro fontWeight per mettere il testo in grassetto (o impostare un altro FontWeight).

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

Aggiungi ombra

Il parametro style ti consente di impostare un oggetto di tipo TextStyle e configurare più parametri, ad esempio l'ombra. Shadow riceve un colore per l'ombra, l'offset o la posizione rispetto a Text e il raggio di sfocatura, ovvero il livello 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

Aggiungi più stili al testo

Per impostare stili diversi all'interno dello stesso Text composable, utilizza un AnnotatedString, una stringa che può essere annotata con stili di annotazioni arbitrarie.

AnnotatedString è una classe di dati che contiene:

• 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 di 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 builder con sicurezza dei tipi per semplificare 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

Visualizza HTML con link nel testo

Utilizza AnnotatedString.fromHtml() per visualizzare il testo in formato HTML con link cliccabili nella tua applicazione Jetpack Compose. Questa funzione converte una stringa con tag HTML in un AnnotatedString, consentendo la gestione di stili e link.

Esempio: HTML con link con stile

Questo snippet esegue il rendering del testo in formato HTML con un link, applicando uno stile specifico al link:

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}
HtmlStyling.kt

Punti chiave sul codice

• AnnotatedString.fromHtml() converte la stringa htmlText in un AnnotatedString. Il parametro linkStyles personalizza l'aspetto del link.

• TextLinkStyles definisce lo stile dei link all'interno dell'HTML. SpanStyle imposta la decorazione del testo, lo stile del carattere e il colore dei link.

• Il Text composable visualizza il AnnotatedString risultante.

Risultato

Questo snippet abilita "Jetpack Compose" come link cliccabile, con stile blu, sottolineato e in corsivo:

Abilita lo stile avanzato con Brush

Per abilitare uno stile del testo più avanzato, puoi utilizzare l'API Brush con TextStyle e SpanStyle. In qualsiasi punto in cui in genere utilizzeresti TextStyle o SpanStyle, ora puoi utilizzare anche Brush.

Utilizza un pennello per lo stile del testo

Configura il testo utilizzando un pennello integrato in TextStyle. Ad esempio, puoi configurare un linearGradient pennello 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 stile di colorazione. Anche se abbiamo fornito un semplice esempio da evidenziare, utilizza uno dei pennelli integrati brushes 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 è perfetta.

Per ulteriori informazioni sull'utilizzo dell'API Brush all'interno di un TextField, consulta Applicare uno stile all'input con l'API Brush.

Stile aggiuntivo con SpanStyle

Applica 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

Opacità in un intervallo di testo

Per regolare l'opacità di un particolare intervallo di testo, utilizza il parametro facoltativo SpanStyle's alpha Utilizza 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 viene visualizzato con un'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

Applica l'effetto marquee al testo

Puoi applicare il basicMarquee modificatore a qualsiasi composable per produrre un effetto di scorrimento animato. L'effetto marquee si verifica se i contenuti sono troppo larghi per rientrare nei vincoli disponibili. Per impostazione predefinita, basicMarquee ha determinate configurazioni (ad esempio velocità e ritardo iniziale), ma puoi modificare questi parametri per personalizzare l'effetto.

Il seguente snippet implementa un effetto marquee 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

Immagine 6. Il modificatore basicMarquee applicato al testo.

Risorse aggiuntive

• Brushing Up on Compose Text Coloring
• Animating brush Text coloring in Compose
• Support multiple links in a single string of text