Włącz interakcje użytkowników

Jetpack Compose umożliwia interaktywność w Text. Zaznaczony tekst to jest teraz bardziej elastyczny i można je tworzyć w różnych układach kompozycyjnych. Interakcje użytkownika z tekstem różnią się od innych kompozytowych układów, ponieważ nie możesz dodać modyfikatora do części kompozytowego komponentu Text. Na tej stronie wyróżniono interfejsy API które umożliwiają interakcje z użytkownikami.

Zaznacz tekst

Domyślnie nie można wybrać elementów kompozycyjnych, co oznacza, że użytkownicy nie mogą: zaznaczanie i kopiowanie tekstu z aplikacji. Aby włączyć zaznaczanie tekstu, zawiń elementów tekstowych za pomocą funkcji SelectionContainer kompozycyjnej:

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

Krótki fragment tekstu wybrany przez użytkownika.

Możesz wyłączyć zaznaczenie w konkretnych częściach obszaru, który można zaznaczyć. Do zrobienia Musisz więc wypełnić niezaznaczoną część elementem DisableSelection funkcja kompozycyjna:

@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 2 wiersze miały zastosowany DisableSelection, więc nie zostały zaznaczone.

Twórz klikalne sekcje tekstu za pomocą atrybutu LinkAnnotation

Aby monitorować kliknięcia na stronie Text, możesz dodać clickable modyfikator. 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 należy użyć właściwości LinkAnnotation, która jest adnotacja reprezentująca fragment tekstu, który można kliknąć.

Za pomocą LinkAnnotation możesz dołączyć adres URL do części funkcji kompozycyjnej Text które otwierają się automatycznie po kliknięciu, jak w tym fragmencie kodu:

@Composable
fun AnnotatedStringWithLinkSample() {
    // Display a link in the text
    Text(
        buildAnnotatedString {
            append("Build better apps faster with ")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(style = SpanStyle(color = Color.Blue))
                )
            ) {
                append("Jetpack Compose")
            }
        }
    )
}
TextSnippets.kt

Możesz też skonfigurować działanie niestandardowe w odpowiedzi na kliknięcie przez użytkownika części funkcję kompozycyjną Text. W poniższym fragmencie, gdy użytkownik kliknie „Jetpack Compose” spowoduje wyświetlenie linku, a dane będą logowane, kliknie 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 Compose") }
        }
    )
}
TextSnippets.kt