Stiltext

Die zusammensetzbare Funktion Text hat mehrere optionale Parameter, um ihren Inhalt zu gestalten. Im Folgenden haben wir Parameter für die häufigsten Anwendungsfälle mit Text aufgeführt. Informationen zu allen Parametern von Text finden Sie im Quellcode für Text.

Wenn Sie einen dieser Parameter festlegen, wird der Stil auf den gesamten Textwert angewendet. Wenn Sie mehrere Stile innerhalb derselben Zeile oder Absätzen anwenden müssen, finden Sie weitere Informationen dazu im Abschnitt Mehrere Inline-Stile.

Gängige Textstile

In den folgenden Abschnitten werden gängige Methoden zum Gestalten von Texten 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 fest.

@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 legen Sie einen anderen FontWeight fest.

@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. den Schatten. Shadow erhält eine Farbe für den Schatten, den Versatz oder die Position, an der sie sich in Bezug auf Text und den Weichzeichner-Radius befindet.

@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 Textstile hinzufügen

Um verschiedene Stile innerhalb derselben zusammensetzbaren Funktion Text festzulegen, verwenden Sie einen AnnotatedString-String, einen String, der mit Stilen beliebiger Annotationen annotiert werden kann.

AnnotatedString ist eine Datenklasse, die Folgendes enthält:

  • Einen Text-Wert
  • Ein List von SpanStyleRange, entspricht dem Inline-Stil mit Positionsbereich innerhalb des Textwerts
  • Ein List von ParagraphStyleRange, mit dem Textausrichtung, Textrichtung, Zeilenhöhe und Texteinzugsstil angegeben werden

TextStyle wird in der zusammensetzbaren Funktion Text verwendet, während SpanStyle und ParagraphStyle in AnnotatedString verwendet werden. Weitere Informationen zu mehreren Stilen in einem Absatz finden Sie unter Mehrere Stile in einem Absatz hinzufügen.

AnnotatedString hat einen typsicheren Builder, um die Erstellung 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 verwenden. Überall, wo Sie normalerweise TextStyle oder SpanStyle verwenden, können Sie jetzt auch Brush verwenden.

Pinsel für Textstile verwenden

Konfiguriere deinen 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

Verwendung der Funktion „linearGradient“ der Brush API mit einer definierten Liste von Farben.
Abbildung 2: Sie verwenden die linearGradient-Funktion 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 zur Hervorhebung bereitgestellt, du kannst aber auch einen der integrierten Pinsel oder auch einfach einen SolidColor verwenden, um deinen Text zu verbessern.

Integrationen

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

Weitere Informationen zur Verwendung der Brush API in einem TextField finden Sie unter Stileingabe mit der Brush API.

Zusätzliche Stile mit SpanStyle

Einen Pinsel auf eine Textspanne anwenden

Wenn Sie einen Pinsel nur auf Teile Ihres 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

Einen Standardpinsel mit linearGradient als Stil für Text verwenden.
Abbildung 4: Du verwendest einen Standardpinsel mit linearGradient als Stil für Text.
Deckkraft in einem Textbereich

Mit dem optionalen alpha-Parameter von SpanStyle können Sie die Deckkraft eines bestimmten Textbereichs anpassen. Verwenden Sie für beide Teile eines Textes denselben Pinsel und ändern Sie den Alpha-Parameter im entsprechenden Span. Im Codebeispiel wird der erste Textbereich 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 buildAnnotatedString und dem Alpha-Parameter von SpanStyle in Verbindung mit linearGradient können Sie einem Textbereich Deckkraft verleihen.
Abbildung 5: Verwenden Sie buildAnnotatedString und den Alpha-Parameter von SpanStyle zusammen mit linearGradient, um einem Textabschnitt Deckkraft zu verleihen.

Weitere Informationen

Weitere Beispiele zur Anpassung finden Sie im Blogpost Mit Pinsel beim Kombinieren von Textfarben nach oben streichen. Weitere Informationen zur Einbindung von Brush in unsere Animations API finden Sie unter Pinseltextfarben in Compose animieren.

Laufrahmeneffekt auf Text anwenden

Sie können den basicMarquee-Modifikator auf jede zusammensetzbare Funktion anwenden, um einen animierten Scrolleffekt zu erzeugen. Der Laufrahmeneffekt 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. Sie können diese Parameter jedoch ändern, um den Effekt anzupassen.

Mit dem folgenden Snippet wird ein grundlegender Laufrahmeneffekt auf eine zusammensetzbare Funktion Text implementiert:

@OptIn(ExperimentalFoundationApi::class)
@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 auf Text angewendete basicMarquee-Modifikator.