Jetpack Compose permet une interactivité ultraprécise dans Text
. La sélection de texte est désormais plus flexible et peut être effectuée sur différentes mises en page modulables. Les interactions utilisateur dans le texte sont différentes des autres mises en page modulables, car vous ne pouvez pas ajouter de modificateur à une partie d'un composable Text
. Cette page présente les API qui permettent les interactions utilisateur.
Sélectionner le texte
Par défaut, les composables ne sont pas sélectionnables, ce qui signifie que les utilisateurs ne peuvent pas sélectionner ni copier de texte depuis votre application. Pour activer la sélection de texte, encapsulez vos éléments de texte avec un composable SelectionContainer
:
@Composable fun SelectableText() { SelectionContainer { Text("This text is selectable") } }
Vous pouvez désactiver la sélection à des endroits spécifiques d'une zone sélectionnable. Pour ce faire, vous devez encapsuler l'emplacement non sélectionnable avec un composable DisableSelection
:
@Composable fun PartiallySelectableText() { SelectionContainer { Column { Text("This text is selectable") Text("This one too") Text("This one as well") DisableSelection { Text("But not this one") Text("Neither this one") } Text("But again, you can select this one") Text("And this one too") } } }
Obtenir la position d'un clic sur du texte
Pour écouter les clics sur Text
, vous pouvez ajouter le modificateur clickable
. Toutefois, si vous souhaitez obtenir la position d'un clic dans un composable Text
, vous devez utiliser un ClickableText
à la place lorsque vous effectuez différentes actions en fonction de différentes parties du texte:
@Composable fun SimpleClickableText() { ClickableText(text = AnnotatedString("Click Me"), onClick = { offset -> Log.d("ClickableText", "$offset -th character is clicked.") }) }
Clic avec annotation
Lorsqu'un utilisateur clique sur un composable Text
, vous pouvez joindre des informations supplémentaires à une partie de la valeur Text
, comme une URL associée à un mot spécifique à ouvrir dans un navigateur. Pour ce faire, vous devez joindre une annotation, qui utilise une balise (String
), un élément (String
) et une plage de texte en tant que paramètres. Avec AnnotatedString
, ces annotations peuvent être filtrées par leurs balises ou plages de texte. Voici un exemple :
@Composable fun AnnotatedClickableText() { val annotatedText = buildAnnotatedString { append("Click ") // We attach this *URL* annotation to the following content // until `pop()` is called pushStringAnnotation( tag = "URL", annotation = "https://developer.android.com" ) withStyle( style = SpanStyle( color = Color.Blue, fontWeight = FontWeight.Bold ) ) { append("here") } pop() } ClickableText(text = annotatedText, onClick = { offset -> // We check if there is an *URL* annotation attached to the text // at the clicked position annotatedText.getStringAnnotations( tag = "URL", start = offset, end = offset ).firstOrNull()?.let { annotation -> // If yes, we log its value Log.d("Clicked URL", annotation.item) } }) }
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Sémantique dans Compose
- Accessibilité dans Compose
- Material Design 2 dans Compose