Attiva le interazioni degli utenti

Jetpack Compose consente un'interattività granulare in Text. La selezione del testo è ora più flessibile e può essere eseguita su layout componibili. Le interazioni degli utenti nel testo sono diverse da quelle di altri layout componibili, in quanto non puoi aggiungere un modificatore a una parte di un elemento componibile Text. Questa pagina mette in evidenza le API che consentono le interazioni degli utenti.

Seleziona testo

Per impostazione predefinita, gli elementi componibili non sono selezionabili, il che significa che gli utenti non possono selezionare e copiare il testo dalla tua app. Per abilitare la selezione del testo, racchiudi gli elementi di testo con un elemento componibile SelectionContainer:

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable")
    }
}
TextSnippets.kt

Un breve passaggio di testo selezionato dall'utente.

Potresti voler disattivare la selezione su parti specifiche di un'area selezionabile. Per farlo, devi racchiudere la parte non selezionabile con un elemento componibile: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")
        }
    }
}
TextSnippets.kt

Un passaggio di testo più lungo. L'utente ha tentato di selezionare l'intero passaggio, ma poiché a due righe era stata applicata l'opzione Disabilita selezione, non sono state selezionate.

Creare sezioni di testo su cui è possibile fare clic con LinkAnnotation

Per rilevare i clic su Text, puoi aggiungere il clickable modificatore. Tuttavia, potresti voler allegare informazioni aggiuntive a una determinata parte del valore Text, ad esempio un URL allegato a una determinata parola da aprire in un browser. In questi casi, devi utilizzare un LinkAnnotation, ovvero un'annotazione che rappresenta una parte di testo su cui è possibile fare clic.

Con LinkAnnotation, puoi allegare un URL a una parte di un elemento componibile Text che si apre automaticamente quando viene fatto clic, come mostrato nel seguente snippet:

@Composable
fun AnnotatedStringWithLinkSample() {
    // Display multiple links in the text
    Text(
        buildAnnotatedString {
            append("Go to the ")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/",
                    TextLinkStyles(style = SpanStyle(color = Color.Blue))
                )
            ) {
                append("Android Developers ")
            }
            append("website, and check out the")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(style = SpanStyle(color = Color.Green))
                )
            ) {
                append("Compose guidance")
            }
            append(".")
        }
    )
}
TextSnippets.kt

Puoi anche configurare un'azione personalizzata in risposta a un clic dell'utente su una parte dell'elemento componibile Text. Nello snippet seguente, quando l'utente fa clic su "Jetpack Compose", viene visualizzato un link e le metriche vengono registrate se l'utente fa clic sul link:

@Composable
fun AnnotatedStringWithListenerSample() {
    // Display a link in the text and log metrics whenever user clicks on it. In that case we handle
    // the link using openUri method of the LocalUriHandler
    val uriHandler = LocalUriHandler.current
    Text(
        buildAnnotatedString {
            append("Build better apps faster with ")
            val link =
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(SpanStyle(color = Color.Blue))
                ) {
                    val url = (it as LinkAnnotation.Url).url
                    // log some metrics
                    uriHandler.openUri(url)
                }
            withLink(link) { append("Jetpack Compose") }
        }
    )
}
TextSnippets.kt