Włącz interakcje użytkowników

Jetpack Compose umożliwia szczegółową interaktywność w Text. Zaznaczanie tekstu jest teraz bardziej elastyczne i można je wykonywać w ramach układów kompozytowych. Interakcje użytkownika z tekstem różnią się od innych kompozybilnych układów, ponieważ nie można dodać modyfikatora do części kompozybilnego komponentu Text. Ta strona zawiera informacje o interfejsach API, które umożliwiają interakcje z użytkownikiem.

Zaznacz tekst

Domyślnie komponenty nie są wybieralne, co oznacza, że użytkownicy nie mogą zaznaczać ani kopiować tekstu w aplikacji. Aby umożliwić wybór tekstu, owiń elementy tekstowe komponentem SelectionContainer:

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

Możesz wyłączyć zaznaczenie w konkretnych częściach obszaru, który można zaznaczyć. Aby to zrobić, musisz opakować niemożliwą do wyboru część funkcją kompozycyjną 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

Tworzenie klikalnych sekcji tekstu w usłudze LinkAnnotation

Aby rejestrować kliknięcia na elemencie Text, możesz dodać modyfikator clickable. Możesz jednak dołączyć dodatkowe informacje do określonej części wartości Text, np. adres URL dołączony do określonego słowa, aby otworzyć go w przeglądarce. W takich przypadkach musisz użyć adnotacji LinkAnnotation, która reprezentuje część tekstu, którą można kliknąć.

Za pomocą LinkAnnotation możesz dołączyć adres URL do części komponentu Text, który otwiera się automatycznie 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ć działanie niestandardowe w odpowiedzi na kliknięcie przez użytkownika części funkcji kompozycyjnej Text. W poniższym fragmencie po kliknięciu przez użytkownika opcji „Jetpack Compose” wyświetla się link, a po kliknięciu linku zostają 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