เปิดใช้การโต้ตอบของผู้ใช้
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
Jetpack Compose ช่วยให้โต้ตอบได้อย่างละเอียดใน Text
ตอนนี้การเลือกข้อความมีความยืดหยุ่นมากขึ้นและสามารถทำได้ในเลย์เอาต์ที่ประกอบได้ การโต้ตอบของผู้ใช้
ในข้อความจะแตกต่างจากเลย์เอาต์ที่ประกอบได้อื่นๆ เนื่องจากคุณเพิ่มตัวแก้ไข
ไปยังส่วนหนึ่งของ Composable Text
ไม่ได้ หน้านี้ไฮไลต์ API
ที่ช่วยให้ผู้ใช้โต้ตอบกันได้
เลือกข้อความ
โดยค่าเริ่มต้น Composable จะเลือกไม่ได้ ซึ่งหมายความว่าผู้ใช้จะเลือกและคัดลอกข้อความจากแอปไม่ได้ หากต้องการเปิดใช้การเลือกข้อความ ให้ห่อองค์ประกอบข้อความด้วย Composable SelectionContainer
@Composable
fun SelectableText() {
SelectionContainer {
Text("This text is selectable")
}
}
คุณอาจต้องการปิดใช้การเลือกในบางส่วนของพื้นที่ที่เลือกได้ หากต้องการทำเช่นนั้น คุณต้องครอบส่วนที่เลือกไม่ได้ด้วย DisableSelection
Composable ดังนี้
@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")
}
}
}
สร้างส่วนของข้อความที่คลิกได้ด้วย LinkAnnotation
หากต้องการฟังการคลิกใน Text
คุณสามารถเพิ่มตัวแก้ไข clickable
ได้ อย่างไรก็ตาม คุณอาจต้องการแนบข้อมูลเพิ่มเติมไปยังส่วนหนึ่งของค่า Text
เช่น URL ที่แนบไปกับคำหนึ่งๆ เพื่อเปิดในเบราว์เซอร์ ในกรณีเช่นนี้ คุณต้องใช้ LinkAnnotation
ซึ่งเป็น
คำอธิบายประกอบที่แสดงส่วนของข้อความที่คลิกได้
เมื่อใช้ LinkAnnotation
คุณจะแนบ URL ไปกับส่วนของ Text
ที่ประกอบได้
ซึ่งจะเปิดขึ้นโดยอัตโนมัติเมื่อคลิก ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
@Composable
fun AnnotatedStringWithLinkSample() {
// Display multiple links in the text
Text(
buildAnnotatedString {
append("Go to the ")
withLink(
LinkAnnotation.Url(
"https://developer.android.com/",
TextLinkStyles(style = SpanStyle(color = Color.Blue))
)
) {
append("Android Developers ")
}
append("website, and check out the")
withLink(
LinkAnnotation.Url(
"https://developer.android.com/jetpack/compose",
TextLinkStyles(style = SpanStyle(color = Color.Green))
)
) {
append("Compose guidance")
}
append(".")
}
)
}
นอกจากนี้ คุณยังกำหนดค่าการดำเนินการที่กำหนดเองเพื่อตอบสนองต่อการคลิกของผู้ใช้ในส่วนหนึ่งของ
Text
Composable ได้ด้วย ในข้อมูลโค้ดต่อไปนี้ เมื่อผู้ใช้คลิก "Jetpack Compose"
ระบบจะแสดงลิงก์และบันทึกเมตริกหากผู้ใช้คลิกลิงก์
@Composable
fun AnnotatedStringWithListenerSample() {
// Display a link in the text and log metrics whenever user clicks on it. In that case we handle
// the link using openUri method of the LocalUriHandler
val uriHandler = LocalUriHandler.current
Text(
buildAnnotatedString {
append("Build better apps faster with ")
val link =
LinkAnnotation.Url(
"https://developer.android.com/jetpack/compose",
TextLinkStyles(SpanStyle(color = Color.Blue))
) {
val url = (it as LinkAnnotation.Url).url
// log some metrics
uriHandler.openUri(url)
}
withLink(link) { append("Jetpack Compose") }
}
)
}
แนะนำสำหรับคุณ
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-30 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-08-30 UTC"],[],[],null,["Jetpack Compose enables fine-grained interactivity in `Text`. Text selection is\nnow more flexible and can be done across composable layouts. User interactions\nin text are different from other composable layouts, as you can't add a modifier\nto a portion of a `Text` composable. This page highlights the APIs\nthat enable user interactions.\n\nSelect text\n\nBy default, composables aren't selectable, which means that users can't\nselect and copy text from your app. To enable text selection, wrap\nyour text elements with a [`SelectionContainer`](/reference/kotlin/androidx/compose/foundation/text/selection/package-summary#SelectionContainer(androidx.compose.ui.Modifier,kotlin.Function0)) composable:\n\n\n```kotlin\n@Composable\nfun SelectableText() {\n SelectionContainer {\n Text(\"This text is selectable\")\n }\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L407-L412\n```\n\n\u003cbr /\u003e\n\nYou may want to disable selection on specific parts of a selectable area. To do\nso, you need to wrap the unselectable part with a [`DisableSelection`](/reference/kotlin/androidx/compose/foundation/text/selection/package-summary#DisableSelection(kotlin.Function0))\ncomposable:\n\n\n```kotlin\n@Composable\nfun PartiallySelectableText() {\n SelectionContainer {\n Column {\n Text(\"This text is selectable\")\n Text(\"This one too\")\n Text(\"This one as well\")\n DisableSelection {\n Text(\"But not this one\")\n Text(\"Neither this one\")\n }\n Text(\"But again, you can select this one\")\n Text(\"And this one too\")\n }\n }\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L418-L433\n```\n\n\u003cbr /\u003e\n\nCreate clickable sections of text with `LinkAnnotation`\n\nTo listen for clicks on `Text`, you can add the [`clickable`](/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0))\nmodifier. However, you may want to attach extra information to a certain part of\nthe `Text` value, like a URL attached to a certain word to be opened in a\nbrowser. In cases like this, you need to use a [`LinkAnnotation`](/reference/kotlin/androidx/compose/ui/text/LinkAnnotation), which is\nan annotation that represents a clickable part of the text.\n\nWith `LinkAnnotation`, you can attach a URL to a part of a `Text` composable\nthat automatically opens once clicked, as shown in the following snippet:\n\n\n```kotlin\n@Composable\nfun AnnotatedStringWithLinkSample() {\n // Display multiple links in the text\n Text(\n buildAnnotatedString {\n append(\"Go to the \")\n withLink(\n LinkAnnotation.Url(\n \"https://developer.android.com/\",\n TextLinkStyles(style = SpanStyle(color = Color.Blue))\n )\n ) {\n append(\"Android Developers \")\n }\n append(\"website, and check out the\")\n withLink(\n LinkAnnotation.Url(\n \"https://developer.android.com/jetpack/compose\",\n TextLinkStyles(style = SpanStyle(color = Color.Green))\n )\n ) {\n append(\"Compose guidance\")\n }\n append(\".\")\n }\n )\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L564-L590\n```\n\n\u003cbr /\u003e\n\nYou can also configure a custom action in response to a user click on a part of\nthe `Text` composable. In the following snippet, when the user clicks on\n\"Jetpack Compose,\" a link is displayed, and metrics are logged if the user\nclicks the link:\n\n\n```kotlin\n@Composable\nfun AnnotatedStringWithListenerSample() {\n // Display a link in the text and log metrics whenever user clicks on it. In that case we handle\n // the link using openUri method of the LocalUriHandler\n val uriHandler = LocalUriHandler.current\n Text(\n buildAnnotatedString {\n append(\"Build better apps faster with \")\n val link =\n LinkAnnotation.Url(\n \"https://developer.android.com/jetpack/compose\",\n TextLinkStyles(SpanStyle(color = Color.Blue))\n ) {\n val url = (it as LinkAnnotation.Url).url\n // log some metrics\n uriHandler.openUri(url)\n }\n withLink(link) { append(\"Jetpack Compose\") }\n }\n )\n}https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L594-L614\n```\n\n\u003cbr /\u003e\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Semantics in Compose](/develop/ui/compose/semantics)\n- [Accessibility in Compose](/develop/ui/compose/accessibility)\n- [Material Design 2 in Compose](/develop/ui/compose/designsystems/material)"]]