Le composable Text
comporte plusieurs paramètres facultatifs pour styliser son contenu.
Nous avons listé ci-dessous les paramètres qui couvrent les cas d'utilisation les plus courants avec du texte.
Pour en savoir plus sur tous les paramètres de Text
, consultez le code source de Compose.
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 dans la même ligne ou les mêmes paragraphes, consultez la section sur plusieurs styles intégrés.
Styles de texte courants
Les sections suivantes décrivent des méthodes courantes pour appliquer un style à votre texte.
Modifier la couleur du texte
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Modifier la taille du texte
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
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) }
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) }
Ajouter une ombre
Le paramètre style
vous permet de définir un objet de type TextStyle
et de configurer plusieurs paramètres, comme une 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 ) ) ) }
Ajouter plusieurs styles de texte
Pour définir différents styles dans le même composable Text
, utilisez un AnnotatedString
, une chaîne pouvant ê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
deSpanStyleRange
, qui équivaut au style intégré avec une plage de positions dans la valeur de texte - Une
List
deParagraphStyleRange
, spécifiant l'alignement, la direction, la hauteur et le style du retrait du texte
TextStyle
est destiné à être utilisé dans le composable Text
, tandis que SpanStyle
et ParagraphStyle
sont destinés à être utilisés dans AnnotatedString
. Pour en savoir plus sur l'utilisation de plusieurs styles dans un paragraphe, consultez Ajouter plusieurs styles dans un paragraphe.
AnnotatedString
dispose d'un compilateur de sûreté du typage 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") } ) }
Activer le style avancé avec Brush
Pour activer un style de texte plus avancé, vous pouvez utiliser l'API Brush
avec TextStyle
et SpanStyle
. Désormais, vous pouvez également utiliser Brush
partout où vous utilisez habituellement TextStyle
ou SpanStyle
.
Utiliser un pinceau pour styliser le texte
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 ) ) )
Vous n'êtes pas limité à cette palette de couleurs ou à ce style de couleur particulier. Bien que nous ayons fourni un exemple simple à mettre en évidence, utilisez l'un des pinceaux intégrés ou même simplement un SolidColor
pour améliorer votre texte.
Intégrations
Étant donné que vous pouvez utiliser Brush
avec TextStyle
et SpanStyle
, l'intégration avec TextField
et buildAnnotatedString
est fluide.
Pour en savoir plus sur l'utilisation de l'API Brush dans un TextField
, consultez Saisir un style avec l'API Brush.
Ajout d'un style à l'aide de SpanStyle
Appliquer un pinceau sur une portion de texte
Si vous ne souhaitez appliquer un pinceau que sur 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.") } )
Opacité dans une plage de texte
Pour ajuster l'opacité d'un segment 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 l'intervalle correspondant.
Dans l'exemple de code, le premier segment de texte s'affiche avec une opacité partielle (alpha =.5f
), tandis que le second s'affiche avec une opacité totale (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 ❤️") } }
Ressources supplémentaires
Pour obtenir d'autres exemples de personnalisation, consultez l'article de blog Essuyer sur la coloration du texte Compose. Si vous souhaitez en savoir plus sur l'intégration de Brush
à notre API Animations, consultez Animer la coloration du texte au pinceau dans Compose.
Appliquer un effet de rectangle de sélection au texte
Vous pouvez appliquer le modificateur basicMarquee
à n'importe quel composable pour produire un effet de défilement animé. L'effet de rectangle de sélection se produit si le contenu est trop large pour tenir dans les contraintes disponibles. Par défaut, certaines configurations (telles que la vitesse et le délai initial) de basicMarquee
sont définies, mais vous pouvez modifier ces paramètres pour personnaliser l'effet.
L'extrait de code suivant implémente un effet de rectangle de sélection de base sur un composable 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 ) } }
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