Jetpack Compose memungkinkan interaksi yang lebih mendetail di Text
. Pemilihan teks
kini lebih fleksibel dan dapat dilakukan di seluruh tata letak composable. Interaksi pengguna
dalam teks berbeda dengan tata letak composable lainnya, karena Anda tidak dapat menambahkan pengubah
ke bagian dari composable Text
. Halaman ini menyoroti API
yang memungkinkan interaksi pengguna.
Pilih teks
Secara default, composable tidak dapat dipilih, yang berarti pengguna tidak dapat
memilih dan menyalin teks dari aplikasi Anda. Untuk mengaktifkan pemilihan teks, gabungkan
elemen teks Anda dengan composable SelectionContainer
:
@Composable fun SelectableText() { SelectionContainer { Text("This text is selectable") } }
Anda mungkin ingin menonaktifkan pilihan pada bagian tertentu dari area yang dapat dipilih. Untuk melakukannya,
Anda harus menggabungkan bagian yang tidak dapat dipilih dengan composable
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") } } }
Mendapatkan posisi klik pada teks
Untuk memproses klik pada Text
, Anda dapat menambahkan pengubah
clickable
. Namun, jika Anda ingin mendapatkan posisi klik dalam
composable Text
, jika Anda memiliki tindakan berbeda berdasarkan
bagian teks yang berbeda, Anda harus menggunakan ClickableText
sebagai gantinya:
@Composable fun SimpleClickableText() { ClickableText(text = AnnotatedString("Click Me"), onClick = { offset -> Log.d("ClickableText", "$offset -th character is clicked.") }) }
Mengklik dengan anotasi
Saat pengguna mengklik composable Text
, Anda mungkin ingin melampirkan informasi
tambahan ke bagian nilai Text
, misalnya URL yang terkait dengan kata
tertentu yang akan dibuka di browser. Untuk melakukannya, Anda harus melampirkan
anotasi, yang memerlukan tag (String
), item (String
), dan rentang teks
sebagai parameter. Dari AnnotatedString
, anotasi ini dapat difilter dengan tag atau rentang teksnya. Berikut contohnya:
@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) } }) }
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Semantik di Compose
- Aksesibilitas di Compose
- Desain Material 2 di Compose