Stiltext

Das Text-Element bietet mehrere optionale Parameter, um den Inhalt zu formatieren. Nachfolgend sind die Parameter aufgeführt, die die häufigsten Anwendungsfälle mit Text abdecken. Informationen zu allen Parametern von Text finden Sie unter Quellcode erstellen.

Wenn Sie einen dieser Parameter festlegen, wird der Stil auf den gesamten Textwert angewendet. Wenn Sie mehrere Stile auf dieselbe Linie oder dieselben Absätze anwenden müssen, lesen Sie den Abschnitt zu mehreren Inline-Stilen.

Gängige Textstile

In den folgenden Abschnitten werden gängige Möglichkeiten beschrieben, wie Sie Text formatieren können.

Textfarbe ändern

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

Textgröße ändern

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

Text kursiv formatieren

Verwenden Sie den Parameter fontStyle, um Text kursiv zu formatieren (oder einen anderen FontStyle festzulegen).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

Text fett formatieren

Verwenden Sie den Parameter fontWeight, um Text fett zu formatieren, oder legen Sie einen anderen FontWeight fest.

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

Schatten hinzufügen

Mit dem Parameter style können Sie ein Objekt vom Typ TextStyle festlegen und mehrere Parameter konfigurieren, z. B. „Shadow“. Shadow erhält eine Farbe für den Schatten, den Versatz oder die Position in Bezug auf Text und den Unkenntlichmachungsradius, der angibt, wie verschwommen das Objekt erscheint.

@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue, offset = offset, blurRadius = 3f
            )
        )
    )
}
TextSnippets.kt

Mehrere Stile in Text einfügen

Wenn Sie innerhalb desselben Text-Kompositionselements unterschiedliche Stile festlegen möchten, verwenden Sie AnnotatedString. Das ist ein String, der mit beliebigen Annotationsstilen versehen werden kann.

AnnotatedString ist eine Datenklasse mit folgenden Elementen:

• Einen Text-Wert
• Ein List von SpanStyleRange, entspricht dem Inline-Styling mit einem Positionsbereich innerhalb des Textwerts
• Ein List von ParagraphStyleRange, mit dem Textausrichtung, Textrichtung, Zeilenhöhe und Stil für den Texteinzug angegeben werden

TextStyle ist für die Verwendung in Text-Kompositen vorgesehen, während SpanStyle und ParagraphStyle für die Verwendung in AnnotatedString vorgesehen sind. Weitere Informationen zu mehreren Stilen in einem Absatz finden Sie unter Mehrere Stile in einem Absatz hinzufügen.

AnnotatedString hat einen typsicheren Builder, der die Erstellung erleichtert: buildAnnotatedString.

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}
TextSnippets.kt

Erweitertes Styling mit Brush aktivieren

Wenn Sie erweiterte Textformatierungen verwenden möchten, können Sie die Brush API mit TextStyle und SpanStyle verwenden. Sie können Brush überall dort verwenden, wo Sie normalerweise TextStyle oder SpanStyle verwenden würden.

Achtung :Die aktuelle Nutzung der Brush API in TextStyle ist experimentell. Experimentelle APIs können sich in Zukunft ändern.

Pinsel für Textstil verwenden

Konfigurieren Sie den Text mit einem integrierten Pinsel in TextStyle. So können Sie beispielsweise einen linearGradient-Pinsel für Ihren Text konfigurieren:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Abbildung 2: Die linearGradient-Funktion der Brush API mit einer definierten Liste von Farben verwenden

Sie sind nicht auf dieses bestimmte Farbschema oder diesen Farbstil beschränkt. Wir haben zwar ein einfaches Beispiel für Hervorhebungen gezeigt, Sie können aber auch einen der integrierten Pinsel oder einfach nur ein SolidColor verwenden, um Ihren Text zu betonen.

Integrationen

Da Sie Brush zusammen mit TextStyle und SpanStyle verwenden können, erfolgt die Integration mit TextField und buildAnnotatedString nahtlos.

Weitere Informationen zur Verwendung der Brush API in einer TextField finden Sie unter Stil-Eingabe mit der Brush API.

Zusätzliche Stile mit SpanStyle

Pinsel auf einen Textabschnitt anwenden

Wenn Sie einen Pinsel nur auf bestimmte Teile des Textes anwenden möchten, verwenden Sie buildAnnotatedString und die SpanStyle API zusammen mit dem Pinsel und dem Farbverlauf Ihrer Wahl.

Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
TextSnippets.kt

Abbildung 4: Standardpinsel mit linearGradient als Stil für Text verwenden

Deckkraft in einem Textabschnitt

Mit dem optionalen Parameter alpha von SpanStyle kannst du die Deckkraft eines bestimmten Textabschnitts anpassen. Verwenden Sie für beide Teile eines Textes denselben Pinsel und ändern Sie den Alpha-Parameter in der entsprechenden Spanne. Im Codebeispiel wird der erste Textabschnitt mit halber Deckkraft (alpha =.5f) und der zweite mit voller Deckkraft (alpha = 1f) angezeigt.

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

Abbildung 5: Mit dem Alphaparameter von buildAnnotatedString und SpanStyle sowie linearGradient, um einem Textabschnitt Opazität hinzuzufügen.

Weitere Informationen

Weitere Anpassungsbeispiele finden Sie im Blogpost Bei der Textausfärbung nach oben streichen. Weitere Informationen zur Einbindung von Brush in unsere Animations API finden Sie unter Zeichenfarbe für Text in Compose animieren.

Text mit dem Marquee-Effekt versehen

Sie können den Modifikator basicMarquee auf jedes Kompositionen anwenden, um einen animierten Scrolleffekt zu erzielen. Der Marquee-Effekt tritt auf, wenn der Inhalt zu breit ist, um in die verfügbaren Beschränkungen zu passen. Standardmäßig sind für basicMarquee bestimmte Konfigurationen (z. B. Geschwindigkeit und anfängliche Verzögerung) festgelegt. Du kannst diese Parameter jedoch ändern, um den Effekt anzupassen.

Im folgenden Snippet wird ein einfacher Marquee-Effekt auf einem Text-Komposit implementiert:

@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

Abbildung 6 Der basicMarquee-Modifikator, der auf Text angewendet wird.