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 zaznaczać w układach kompozycyjnych. Interakcje użytkowników w tekście różnią się od innych układów kompozycyjnych, ponieważ nie można dodać modyfikatora do części funkcji kompozycyjnej Text. Na tej stronie opisujemy interfejsy API, które umożliwiają interakcje z użytkownikami.

Zaznacz tekst

Domyślnie nie można zaznaczyć elementów kompozycyjnych, co oznacza, że użytkownicy nie mogą zaznaczać ani kopiować tekstu z aplikacji. Aby włączyć zaznaczanie tekstu, zawijaj elementy tekstowe za pomocą funkcji kompozycyjnej 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 dla określonych części obszaru, który można wybrać. Aby to zrobić, musisz opakować tę część, której nie można wybrać, 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

Dłuższy fragment tekstu. Użytkownik próbował zaznaczyć cały fragment, ale ponieważ w 2 wierszach zastosowano opcję DisableSelection, nie zostały one wybrane.

Sprawdzanie pozycji kliknięcia tekstu

Aby wykrywać kliknięcia w witrynie Text, możesz dodać modyfikator clickable. Aby jednak ustalić pozycję kliknięcia w komponencie Text, a masz różne działania zależne od poszczególnych części tekstu, musisz zamiast tego użyć elementu ClickableText:

@Composable
fun SimpleClickableText() {
    ClickableText(text = AnnotatedString("Click Me"), onClick = { offset ->
        Log.d("ClickableText", "$offset -th character is clicked.")
    })
}
TextSnippets.kt

Kliknięcie z adnotacją

Gdy użytkownik kliknie kompozycję Text, możesz chcieć dołączyć do wartości Text dodatkowe informacje, np. adres URL powiązany z konkretnym słowem, który ma być otwierany w przeglądarce. Aby to zrobić, musisz dołączyć adnotację, która wybiera tag (String), element (String) i zakres tekstowy jako parametry. W przypadku AnnotatedString adnotacje można filtrować za pomocą tagów lub zakresów tekstowych. Na przykład:

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        append("Click ")

        // We attach this *URL* annotation to the following content
        // until `pop()` is called
        pushStringAnnotation(
            tag = "URL", annotation = "https://developer.android.com"
        )
        withStyle(
            style = SpanStyle(
                color = Color.Blue, fontWeight = FontWeight.Bold
            )
        ) {
            append("here")
        }

        pop()
    }

    ClickableText(text = annotatedText, onClick = { offset ->
        // We check if there is an *URL* annotation attached to the text
        // at the clicked position
        annotatedText.getStringAnnotations(
            tag = "URL", start = offset, end = offset
        ).firstOrNull()?.let { annotation ->
            // If yes, we log its value
            Log.d("Clicked URL", annotation.item)
        }
    })
}
TextSnippets.kt