Stile del testo

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

Modificare la dimensione del testo

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

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

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

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

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 di SpanStyleRange, equivalente agli stili incorporati con intervallo di posizione all'interno del valore di testo
• Un List di ParagraphStyleRange, 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")
        }
    )
}
TextSnippets.kt

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

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

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

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

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