Как включить взаимодействие с пользователем

Jetpack Compose позволяет реализовать в Text интерактивность на уровне отдельных элементов. Выделять текст стало удобнее. Теперь это можно делать в разных макетах. Взаимодействия с текстом отличаются от других макетов, поскольку к части composable-функции Text нельзя добавить модификатор. На этой странице рассказывается об API, которые позволяют пользователям взаимодействовать с контентом.

Выбрать текст

По умолчанию элементы composable не выбираются, а значит, пользователи не могут выделить и скопировать текст из вашего приложения. Чтобы разрешить выбор текста, оберните текстовые элементы в элемент composable SelectionContainer:

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

Короткий фрагмент текста, выбранный пользователем.

Иногда нужно запретить выбор определенных частей области. Для этого нужно обернуть невыбираемую часть в компонент 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")
        }
    }
}

Более длинный фрагмент текста. Пользователь попытался выделить весь фрагмент, но поскольку к двум строкам был применен атрибут DisableSelection, они не были выделены.

Как создавать кликабельные фрагменты текста с помощью LinkAnnotation

Чтобы отслеживать нажатия на Text, можно добавить модификатор clickable. Однако вы можете добавить к определенной части значения Text дополнительную информацию, например URL, который будет открываться в браузере при нажатии на определенное слово. В таких случаях нужно использовать LinkAnnotation – аннотацию, которая представляет собой кликабельную часть текста.

С помощью LinkAnnotation можно прикрепить URL к части composable-функции Text, чтобы при нажатии на нее автоматически открывалась страница, как показано в следующем фрагменте кода:

@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(".")
        }
    )
}

Вы также можете настроить настраиваемое действие в ответ на клик пользователя на часть Text composable-функции. В приведенном ниже фрагменте кода при нажатии на "Jetpack Compose" показывается ссылка, а если пользователь нажимает на нее, регистрируются показатели:

@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") }
        }
    )
}