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. Alle Parameter von Text finden Sie im Abschnitt Text verfassen Quellcode

Wenn Sie einen dieser Parameter festlegen, wird der Stil auf den gesamten Textwert. 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 zum Gestalten von Text beschrieben.

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 legen Sie einen anderen FontStyle)

@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 es aussieht.

@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 für Text hinzufügen

So legen Sie verschiedene Stile im selben Text fest: zusammensetzbar ist, verwenden Sie AnnotatedString, Eine Zeichenfolge, die mit beliebigen Stilen für Anmerkungen versehen werden kann.

AnnotatedString ist eine Datenklasse, die Folgendes enthält:

  • Einen Text-Wert
  • List von SpanStyleRange, entspricht dem Inline-Stil mit Position Bereich innerhalb des Textwerts
  • Ein List von ParagraphStyleRange, Textausrichtung, Text werden angegeben Richtung, Zeilenhöhe und Stil des Texteinzugs

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 verschiedenen Stilen finden Sie in Weitere Informationen zum Hinzufügen mehrerer Stile zu einem Absatz

AnnotatedString hat einen typsicheren Tool , um das Erstellen zu vereinfachen: 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

Erweiterte Stile mit Brush aktivieren

Wenn Sie erweiterte Textstile aktivieren möchten, können Sie die Brush API mit TextStyle und SpanStyle. Überall, wo Sie normalerweise TextStyle oder SpanStyle verwenden, können Sie jetzt auch Brush verwenden.

Pinsel für Textstil verwenden

Sie können Ihren Text mit einem integrierten Pinsel in TextStyle konfigurieren. Zum Beispiel haben Sie können Sie einen linearGradient-Pinsel wie folgt für Ihren Text konfigurieren:

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

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

Verwendung der Funktion „linearGradient“ der Brush API mit einer definierten Liste von Farben
Abbildung 2: Verwendung der Funktion linearGradient der Brush API mit einer definierten Liste von Farben.

Sie sind nicht auf dieses spezielle 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 Stile mit SpanStyle

Pinsel auf einen Textbereich 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 dem gewünschten 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

Standardpinsel mit „linearGradient“ als Stil für „Text“ verwenden
Abbildung 4: Standardpinsel mit linearGradient als Stil für Text verwenden
Deckkraft in einem Textbereich

Wenn Sie die Deckkraft eines bestimmten Textbereichs anpassen möchten, verwenden Sie die Methode SpanStyle Optionaler alpha-Parameter. 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 Textbereich mit halber Deckkraft angezeigt. (alpha =.5f) und die zweite bei voller Deckkraft (alpha = 1f).

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 unsere 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 jede zusammensetzbare Funktion anwenden, einen animierten Scrolleffekt erzeugen. Der Marquee-Effekt tritt auf, wenn der Inhalt zu breit ist, um in die verfügbaren Einschrä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.

Mit dem folgenden Snippet wird ein grundlegender Laufschrifteffekt für eine zusammensetzbare Text-Funktion 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.