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
值的特定部分附加其他資訊,例如附加至特定字詞的網址,以便在瀏覽器中開啟。在這種情況下,您需要使用 LinkAnnotation
,這是代表文字中可點選部分的註解。
使用 LinkAnnotation
時,您可以將網址附加至 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
可組合項中的某個部分。在下列程式碼片段中,當使用者點選「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 關閉時顯示連結文字
- Compose 中的語意
- Compose 中的無障礙功能
- Compose 中的 Material Design 2