Attiva le interazioni degli utenti

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

Seleziona testo

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

@Composable
fun SelectableText() {
    SelectionContainer {
        Text("This text is selectable"
;)
    }
}TextS
nippets.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 componente 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&q
uot;)
         
   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 selezionabili con LinkAnnotation

Per rilevare i clic su Text, puoi aggiungere il modificatore clickable. 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 cliccabile del testo.

Con LinkAnnotation, puoi allegare un URL a una parte di un componente Text che si apre automaticamente una volta selezionato, 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&qu
ot;)
          
  }
            append(".")
        }
    )
}TextSnippets.kt

Puoi anche configurare un'azione personalizzata in risposta a un clic dell'utente su una parte del componente 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 Comp
ose") }
  
      }
    )
}TextSnippets.kt