Nutzerinteraktionen aktivieren

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

Text auswählen

Standardmäßig sind Composables 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, umschließen Sie Ihre Textelemente mit einem SelectionContainer-Composable:

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

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

Möglicherweise möchten Sie die Auswahl für bestimmte Teile eines auswählbaren Bereichs deaktivieren. Dazu müssen Sie den nicht auswählbaren Teil mit einer DisableSelection-Komposition umschließ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")
        }
    }
}

Eine längere Textpassage. Der Nutzer hat versucht, den gesamten Abschnitt auszuwählen. Da jedoch für zwei Zeilen „DisableSelection“ angewendet wurde, wurden sie nicht ausgewählt.

Anklickbare Textabschnitte mit LinkAnnotation erstellen

Wenn Sie auf Klicks auf Text warten möchten, können Sie den Modifikator clickable hinzufügen. Möglicherweise möchtest du jedoch zusätzliche Informationen an einen bestimmten Teil des Text-Werts anhängen, z. B. eine URL, die an ein bestimmtes Wort angehängt ist und in einem Browser geöffnet werden soll. In solchen Fällen müssen Sie eine LinkAnnotation verwenden. Das ist eine Annotation, die einen anklickbaren Teil des Texts darstellt.

Mit LinkAnnotation können Sie eine URL an einen Teil einer Text-komponierbaren Funktion anhängen, 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(".")
        }
    )
}

Sie können auch eine benutzerdefinierte Aktion konfigurieren, die ausgeführt wird, wenn ein Nutzer auf einen Teil des Text-Kompositums klickt. 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") }
        }
    )
}