Jetpack Compose เปิดใช้การโต้ตอบแบบละเอียดใน Text
ตอนนี้การเลือกข้อความมีความยืดหยุ่นมากขึ้นและทำได้ในเลย์เอาต์แบบคอมโพสได้ การโต้ตอบของผู้ใช้กับข้อความแตกต่างจากเลย์เอาต์แบบคอมโพสิเบิลอื่นๆ เนื่องจากคุณไม่สามารถเพิ่มตัวแก้ไขลงในส่วนหนึ่งของคอมโพสิเบิล Text
หน้านี้จะไฮไลต์ API ที่เปิดใช้การโต้ตอบของผู้ใช้
เลือกข้อความ
โดยค่าเริ่มต้น คอมโพสิเบิลจะเลือกไม่ได้ ซึ่งหมายความว่าผู้ใช้จะเลือกและคัดลอกข้อความจากแอปไม่ได้ หากต้องการเปิดใช้การเลือกข้อความ ให้ตัดองค์ประกอบข้อความด้วยคอมโพสิเบิล SelectionContainer
ดังนี้
@Composable fun SelectableText() { SelectionContainer { Text("This text is selectable") } }
คุณอาจต้องการปิดใช้การเลือกในบางส่วนของพื้นที่ที่เลือกได้ โดยคุณจะต้องตัดส่วนที่ไม่เลือกได้ด้วยคอมโพสิเบิล 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") } } }
สร้างส่วนของข้อความที่คลิกได้โดยใช้ 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") } } ) }
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ความหมายในเครื่องมือเขียน
- การช่วยเหลือพิเศษในเครื่องมือเขียน
- Material Design 2 ในเครื่องมือเขียน