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 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 phần tử 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") } }
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") } } }
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 lượt nhấp trong thành phần kết hợp Text
, trong trường hợp có nhiều hành động 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.") }) }
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) } }) }
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Ngữ nghĩa trong Compose
- Hỗ trợ tiếp cận trong Compose
- Material Design 2 trong Compose