เปิดใช้การโต้ตอบของผู้ใช้

Jetpack Compose ช่วยให้การโต้ตอบแบบละเอียดใน Text เป็นไปได้ ตอนนี้การเลือกข้อความมีความยืดหยุ่นมากขึ้นและทำได้ในเลย์เอาต์แบบคอมโพสได้ การโต้ตอบของผู้ใช้กับข้อความแตกต่างจากเลย์เอาต์แบบคอมโพสิเบิลอื่นๆ เนื่องจากคุณไม่สามารถเพิ่มตัวแก้ไขลงในส่วนหนึ่งของคอมโพสิเบิล Text หน้านี้จะไฮไลต์ API ที่เปิดใช้การโต้ตอบของผู้ใช้

เลือกข้อความ

โดยค่าเริ่มต้น คอมโพสิเบิลจะเลือกไม่ได้ ซึ่งหมายความว่าผู้ใช้จะเลือกและคัดลอกข้อความจากแอปไม่ได้ หากต้องการเปิดใช้การเลือกข้อความ ให้ตัดองค์ประกอบข้อความด้วยคอมโพสิเบิล SelectionContainer ดังนี้

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

คุณอาจต้องการปิดใช้การเลือกในบางส่วนของพื้นที่ที่เลือกได้ โดยคุณจะต้องตัดส่วนที่ไม่เลือกได้ด้วยคอมโพสิเบิล 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

สร้างส่วนของข้อความที่คลิกได้โดยใช้ 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(".")
        }
    )
}
TextSnippets.kt

นอกจากนี้ คุณยังกําหนดค่าการดําเนินการที่กำหนดเองเพื่อตอบสนองต่อการคลิกของผู้ใช้ในส่วนหนึ่งของคอมโพสิเบิล Text ได้ด้วย ในสnippet ต่อไปนี้ เมื่อผู้ใช้คลิก "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") }
        }
    )
}
TextSnippets.kt