Bật tính năng tương tác của người dùng

Jetpack Compose cho phép tương tác chi tiết trong Text. Hiện tại, việc lựa chọn văn bản linh hoạt hơn và có thể thực hiện trên các bố cục thành phần kết hợp. Các lượt tương tác của người dùng trong văn bản khác với các bố cục thành phần kết hợp khác, vì bạn không thể thêm công cụ sửa đổi vào một phần của thành phần kết hợp Text. Trang này làm nổi bật các API cho phép người dùng tương tác.

Chọn văn bản

Theo mặc định, các thành phần kết hợp không thể chọn được, nghĩa là người dùng không thể chọn và sao chép văn bản từ ứng dụng của bạn. Để bật tính năng lựa chọn văn bản, hãy gói các thành phần văn bản bằng một thành phần kết hợp SelectionContainer:

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

Một đoạn văn bản ngắn do người dùng chọn.

Bạn có thể muốn tắt tính năng lựa chọn trên các phần cụ thể của một phạm vi có thể chọn. Để làm như vậy, bạn cần bao bọc phần không được chọn bằng một thành phần kết hợp 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

Đoạn văn bản dài hơn. Người dùng đã cố gắng chọn toàn bộ đoạn văn, nhưng vì hai dòng đã áp dụng tính năng DisableSelection nên chúng không được chọn.

Nhận vị trí của một lượt nhấp vào văn bản

Để theo dõi số lượt nhấp trên Text, bạn có thể thêm công cụ sửa đổi clickable. Tuy nhiên, nếu muốn biết vị trí của một lượt nhấp trong thành phần kết hợp Text, trong trường hợp bạn có các thao tác khác nhau dựa trên các phần khác nhau của văn bản, bạn cần sử dụng ClickableText:

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

Nhấp kèm chú thích

Khi người dùng nhấp vào thành phần kết hợp Text, bạn cần đính kèm thông tin bổ sung vào một phần của giá trị Text, ví dụ như URL được đính kèm với một từ cụ thể để mở trong trình duyệt. Để thực hiện việc này, bạn cần đính kèm chú thích, nội dung này sẽ lấy thẻ (String), một mục (String) và một phạm vi văn bản làm thông số. Từ AnnotatedString, các chú thích này có thể được lọc bằng thẻ hoặc phạm vi văn bản. Sau đây là ví dụ:

@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