Stiltext

Das Text-Element bietet mehrere optionale Parameter, um den Inhalt zu formatieren. Unten finden Sie Parameter für die häufigsten Anwendungsfälle mit Text. Alle Parameter von Text finden Sie im Quellcode für die Texterstellung.

Wenn Sie einen dieser Parameter festlegen, wird der Stil auf den gesamten Textwert angewendet. Wenn Sie mehrere Stile innerhalb derselben Zeile oder in Absätzen anwenden möchten, 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

Der Text

Textgröße ändern

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

Der Text

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

Der Text

Text fett formatieren

Verwenden Sie den Parameter fontWeight, um Text fett zu formatieren (oder einen anderen FontWeight festzulegen).

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

Der Text

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

Der Text

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
  • Eine List von ParagraphStyleRange, die Textausrichtung, Textrichtung, Zeilenhöhe und Textabstand festlegt

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 vereinfacht: 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

Der Text

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.

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

Verwenden Sie die Funktion „linearGradient“ der Brush API mit einer definierten Liste von Farben.
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 du Brush sowohl mit TextStyle als auch mit SpanStyle verwenden kannst, ist die Integration in 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 Formatierung mit SpanStyle

Pinsel auf einen Textabschnitt anwenden

Wenn du einen Pinsel nur auf Teile deines Textes anwenden möchtest, verwende buildAnnotatedString und die SpanStyle API zusammen mit dem gewünschten Pinsel und Farbverlauf.

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

Verwendung eines Standard-Pinsels mit linearGradient als Stil für Text
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

Mit dem buildAnnotatedString- und dem Alphaparameter von SpanStyle sowie dem linearGradient-Attribut können Sie einem Textabschnitt Opazität hinzufügen.
Abbildung 5: Mit dem Alphaparameter von buildAnnotatedString und SpanStyle sowie linearGradient, um einem Textabschnitt Opazität hinzuzufügen.

Weitere Informationen

Weitere Beispiele für Anpassungen finden Sie im Blogpost Brushing Up on Compose Text Coloring (Farbgebung von Compose-Text aktualisieren). Weitere Informationen zur Integration von Brush in die Animations-API finden Sie unter Textfärbung mit dem Zeichenpinsel 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.