Appliquer un style au texte

Le composable Text comporte plusieurs paramètres facultatifs pour styliser son contenu. Vous trouverez ci-dessous la liste des paramètres qui couvrent les cas d'utilisation les plus courants liés au texte. Pour connaître tous les paramètres de Text, consultez la documentation Compose Text le code source.

Lorsque vous définissez l'un de ces paramètres, vous appliquez le style à l'ensemble de la valeur de texte. Si vous devez appliquer plusieurs styles sur la même ligne ou paragraphes, reportez-vous à la section sur l'affichage de plusieurs styles de texte.

Styles de texte courants

Les sections suivantes décrivent les méthodes courantes pour styliser votre texte.

Modifier la couleur du texte

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

Modifier la taille du texte

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

Mettre le texte en italique

Utilisez le paramètre fontStyle pour mettre du texte en italique (ou définissez un autre style de police avec FontStyle).

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

Mettre le texte en gras

Utilisez le paramètre fontWeight pour mettre du texte en gras (ou définissez une autre épaisseur de police avec FontWeight).

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

Ajouter une ombre

Le paramètre style vous permet de définir un objet de type TextStyle. et configurer plusieurs paramètres, comme l'ombre. Shadow reçoit une couleur pour l'ombre, le décalage (ou l'emplacement où elle se trouve par rapport à l'élément Text) et le rayon de floutage, qui détermine le niveau de floutage de l'ombre.

@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

Ajouter plusieurs styles dans un texte

Définir différents styles au sein d'une même Text utilisez un élément AnnotatedString, une chaîne qui peut être annotée avec des styles d'annotations arbitraires.

AnnotatedString est une classe de données contenant les éléments suivants :

• Une valeur Text
• Une List de SpanStyleRange, qui équivaut au style intégré avec une plage de positions dans la valeur de texte
• Une List de ParagraphStyleRange, spécifiant l'alignement, la direction, la hauteur et le style du retrait du texte

TextStyle est destiné à être utilisé dans le composable Text, alors que SpanStyle et ParagraphStyle doit être utilisé dans AnnotatedString. Pour en savoir plus sur les styles multiples dans à un paragraphe, consultez Ajouter plusieurs styles dans un paragraphe.

AnnotatedString possède une protection avec sûreté du typage professionnel pour faciliter la création: 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

Activer le style avancé avec Brush

Pour activer un style de texte plus avancé, vous pouvez utiliser l'API Brush avec TextStyle et SpanStyle. Où que vous soyez, utiliser TextStyle ou SpanStyle, vous pouvez maintenant utiliser Brush.

Appliquer un style au texte à l'aide d'un pinceau

Configurez votre texte à l'aide d'un pinceau intégré dans TextStyle. Par exemple, vous pouvez configurer un pinceau linearGradient pour votre texte comme suit :

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

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

Vous n'êtes pas limité à ce jeu de couleurs ou à ce style de coloration particulier. Alors que nous avons fourni un exemple simple à mettre en évidence. Utilisez l'un des pinceaux ou même simplement une SolidColor pour améliorer votre texte.

Intégrations

Étant donné que vous pouvez utiliser Brush avec TextStyle et SpanStyle, l'intégration à TextField et buildAnnotatedString est parfaite.

Pour en savoir plus sur l'utilisation de l'API pinceau dans un TextField, consultez Saisie de style avec l'API Brush.

Ajout de styles avec SpanStyle

Appliquer un pinceau à une partie de texte

Si vous ne souhaitez appliquer un pinceau qu'à certaines parties de votre texte, utilisez buildAnnotatedString et l'API SpanStyle, ainsi que le pinceau et le dégradé de votre choix.

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é d'une partie de texte

Pour ajuster l'opacité d'une plage de texte spécifique, utilisez le paramètre alpha facultatif de SpanStyle. Utilisez le même pinceau pour les deux parties d'un texte et modifiez le paramètre alpha dans la plage correspondante. Dans l'exemple de code, le premier segment de texte s'affiche à demi-opacité (alpha =.5f), tandis que le second s'affiche à pleine opacité (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

Ressources supplémentaires

Pour obtenir d'autres exemples de personnalisation, consultez la section Effleurer vers le haut du texte de Compose Article de blog sur le coloriage Si vous souhaitez en savoir plus sur comment Brush s'intègre à notre API Animations, consultez la section Animer la coloration du texte au pinceau. dans Compose.

Appliquer un effet de rectangle au texte

Vous pouvez appliquer le modificateur basicMarquee à n'importe quel composable pour un effet de défilement animé. L'effet de rectangle de sélection se produit si le contenu est trop large pour tenir compte des contraintes disponibles. Par défaut, basicMarquee a certaines configurations (telles que la vitesse et le délai initial), mais vous pouvez modifier ces paramètres pour personnaliser l'effet.

L'extrait de code suivant implémente un effet de sélection de base sur 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

Figure 6. Modificateur basicMarquee appliqué au texte.

Recommandations personnalisées

• Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
• Style de paragraphe
• Material Design 2 dans Compose
• Modificateurs graphiques