Cómo habilitar las interacciones del usuario

Jetpack Compose habilita la interactividad detallada en Text. La selección de texto ahora es más flexible y se puede realizar en diseños componibles. Las interacciones de los usuarios en el texto son diferentes de otros diseños componibles, ya que no puedes agregar un modificador a una parte de un elemento Text componible. En esta página, se destacan las APIs que permiten las interacciones del usuario.

Seleccionar texto

De forma predeterminada, no se pueden seleccionar elementos componibles, lo que significa que los usuarios no pueden seleccionar y copiar texto desde tu app. Para habilitar la selección de texto, une tus elementos de texto con un elemento componible SelectionContainer:

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

Puede que quieras inhabilitar la selección en partes específicas de un área seleccionable. Para hacerlo, debes unir la parte que no se puede seleccionar con un elemento componible 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

Cómo crear secciones de texto en las que se pueda hacer clic con LinkAnnotation

Para escuchar los clics en Text, puedes agregar el modificador clickable. Sin embargo, tal vez quieras adjuntar información adicional a una parte específica del valor Text, como una URL adjunta a una palabra específica para abrirla en un navegador. En casos como este, debes usar un LinkAnnotation, que es una anotación que representa una parte del texto en la que se puede hacer clic.

Con LinkAnnotation, puedes adjuntar una URL a una parte de un elemento Text componible que se abre automáticamente una vez que se hace clic en él, como se muestra en el siguiente fragmento:

@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

También puedes configurar una acción personalizada en respuesta a un clic del usuario en una parte del elemento componible Text. En el siguiente fragmento, cuando el usuario hace clic en "Jetpack Compose", se muestra un vínculo y se registran las métricas si el usuario hace clic en el vínculo:

@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