Nutzerinteraktionen aktivieren

Mit Jetpack Compose können Sie in Text eine detaillierte Interaktivität ermöglichen. Die Textauswahl ist jetzt flexibler und kann über mehrere zusammensetzbare Layouts hinweg erfolgen. Nutzerinteraktionen in Text unterscheiden sich von anderen composable-Layouts, da Sie einem Teil eines Text-composables keinen Modifikator hinzufügen können. Auf dieser Seite werden die APIs hervorgehoben, die Nutzerinteraktionen ermöglichen.

Text auswählen

Standardmäßig sind Composeables nicht auswählbar. Das bedeutet, dass Nutzer keinen Text aus Ihrer App auswählen und kopieren können. Wenn Sie die Textauswahl aktivieren möchten, schließen Sie Ihre Textelemente in ein SelectionContainer-Composeable ein:

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

Ein kurzer Textabschnitt, der vom Nutzer ausgewählt wurde.

Sie können die Auswahl für bestimmte Teile eines auswählbaren Bereichs deaktivieren. Dazu müssen Sie den nicht auswählbaren Teil in einen DisableSelection-Komposit einschließen:

@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

Eine längere Textpassage. Der Nutzer hat versucht, den gesamten Textausschnitt auszuwählen, aber da für zwei Zeilen „DisableSelection“ festgelegt war, wurden sie nicht ausgewählt.

Mit LinkAnnotation anklickbare Textabschnitte erstellen

Wenn Sie auf Klicks auf Text reagieren möchten, können Sie den Modifikator clickable hinzufügen. Möglicherweise möchten Sie jedoch einem bestimmten Teil des Text-Werts zusätzliche Informationen hinzufügen, z. B. eine URL, die mit einem bestimmten Wort verknüpft ist und in einem Browser geöffnet werden soll. In solchen Fällen müssen Sie LinkAnnotation verwenden. Dies ist eine Anmerkung, die einen anklickbaren Teil des Textes darstellt.

Mit LinkAnnotation können Sie einem Teil eines Text-Elements eine URL zuweisen, die automatisch geöffnet wird, wenn darauf geklickt wird, wie im folgenden Snippet gezeigt:

@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

Sie können auch eine benutzerdefinierte Aktion konfigurieren, die als Reaktion auf einen Nutzerklick auf einen Teil des Text-Elements ausgeführt wird. Im folgenden Snippet wird ein Link angezeigt, wenn der Nutzer auf „Jetpack Compose“ klickt. Wenn der Nutzer auf den Link klickt, werden Messwerte protokolliert:

@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