Ativar interações do usuário

O Jetpack Compose permite interatividade detalhada no Text. A seleção de texto agora é mais flexível e pode ser feita em layouts de composição. As interações do usuário nos textos são diferentes de outros layouts do mesmo tipo, já que não é possível adicionar um modificador a uma parte de um elemento Text. Esta página destaca as APIs que permitem interações do usuário.

Selecionar texto

Por padrão, os elementos combináveis não podem ser selecionados, ou seja, os usuários não podem selecionar e copiar textos do app. Para ativar a seleção de texto, envolva os elementos de texto com um elemento SelectionContainer:

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

Pequeno trecho de texto selecionado pelo usuário.

Você pode desativar a seleção de texto em partes específicas de uma área selecionável. Para fazer isso, é necessário unir a parte que não pode ser selecionada a um elemento combinável 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

Trecho de texto mais longo. O usuário tentou selecionar a passagem inteira, mas, como duas linhas tinham a opção "DisableSelection" aplicada, elas não foram selecionadas.

Obtenha a posição de um clique no texto

Para detectar cliques no Text, adicione o modificador clickable. No entanto, se você quiser saber a posição de um clique em um elemento combinável Text, caso haja ações diferentes com base em diferentes partes do texto, use um ClickableText:

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

Clique com anotação

Quando um usuário clica em um elemento combinável Text, você pode anexar mais informações a uma parte do valor do Text, como um URL anexado a uma palavra específica que é aberto em um navegador. Para fazer isso, anexe uma anotação, que usa uma tag (String), um item (String) e um intervalo de texto como parâmetros. A partir de uma AnnotatedString, essas anotações podem ser filtradas de acordo com as tags ou intervalos de texto. Veja um exemplo:

@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