Włącz interakcje użytkowników

Jetpack Compose umożliwia precyzyjną interaktywność w przypadku elementu Text. Wybieranie tekstu jest teraz bardziej elastyczne i można je wykonywać w układach z możliwością komponowania. Interakcje użytkownika z tekstem różnią się od interakcji z innymi układami z możliwością komponowania, ponieważ nie można dodać modyfikatora do części elementu Text. Na tej stronie znajdziesz informacje o interfejsach API, które umożliwiają interakcje użytkownika.

Zaznacz tekst

Domyślnie elementy z możliwością komponowania nie są wybieralne, co oznacza, że użytkownicy nie mogą zaznaczać i kopiować tekstu z Twojej aplikacji. Aby włączyć wybieranie tekstu, otocz elementy tekstowe elementem z możliwością komponowania SelectionContainer:

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

Krótki fragment tekstu wybrany przez użytkownika.

Możesz wyłączyć wybieranie w określonych częściach obszaru wybieralnego. Aby to zrobić, musisz otoczyć niewybieralną część elementem z możliwością komponowania DisableSelectioncomposable:

@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

dłuższy fragment tekstu. Użytkownik próbował zaznaczyć cały fragment, ale ponieważ w przypadku 2 wierszy zastosowano ustawienie DisableSelection, nie zostały one zaznaczone.

Tworzenie klikalnych sekcji tekstu za pomocą LinkAnnotation

Aby nasłuchiwać kliknięć w element Text, możesz dodać modyfikator clickable. Możesz jednak chcieć dołączyć dodatkowe informacje do określonej części wartości Text, np. adres URL dołączony do określonego słowa, które ma zostać otwarte w przeglądarce. W takich przypadkach musisz użyć elementu LinkAnnotation, który jest adnotacją reprezentującą klikalną część tekstu.

Za pomocą elementu LinkAnnotation możesz dołączyć adres URL do części elementu z możliwością komponowania Text, który automatycznie otworzy się po kliknięciu, jak pokazano w tym fragmencie kodu:

@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

Możesz też skonfigurować niestandardowe działanie w odpowiedzi na kliknięcie przez użytkownika części elementu z możliwością komponowania Text. W tym fragmencie kodu, gdy użytkownik kliknie „Jetpack Compose”, wyświetli się link, a jeśli użytkownik kliknie ten link, zostaną zarejestrowane dane.

@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