Stiltext

Die zusammensetzbare Funktion Text hat mehrere optionale Parameter, um ihren Inhalt zu gestalten. 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 zum Gestalten von Text beschrieben.

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

@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 Weichzeichner-Radius, also die Verschwommenheit.

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

Um verschiedene Stile in derselben zusammensetzbaren Funktion Text festzulegen, verwenden Sie AnnotatedString. Dies ist ein String, der mit beliebigen Stilen für Annotationen annotiert werden kann.

AnnotatedString ist eine Datenklasse, die Folgendes enthält:

• Ein 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 Stil für den Texteinzug 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.

Für AnnotatedString gibt es 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

Erweiterte Stile mit Brush aktivieren

Wenn Sie erweiterte Textstile aktivieren möchten, können Sie die Brush API mit TextStyle und SpanStyle verwenden. An jeder Stelle, an der Sie normalerweise TextStyle oder SpanStyle verwenden, können Sie jetzt auch Brush verwenden.

Pinsel zum Gestalten von Texten verwenden

Sie können Ihren Text mit einem integrierten Pinsel in TextStyle konfigurieren. 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

Sie sind nicht auf dieses spezielle Farbschema oder diesen Farbstil beschränkt. Wir haben hier nur ein einfaches Beispiel zur Hervorhebung bereitgestellt. Sie können aber auch einen der integrierten Pinsel oder auch nur SolidColor verwenden, um Ihren Text zu optimieren.

Integrationen

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

Weitere Informationen zur Verwendung der Brush API in einem TextField findest du unter Eingabe mit der Brush API gestalten.

Zusätzliche Stile mit SpanStyle

Pinsel auf einen Textbereich anwenden

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

Deckkraft in einem Textbereich

Wenn Sie die Deckkraft eines bestimmten Textbereichs anpassen möchten, verwenden Sie den optionalen alpha-Parameter von SpanStyle. Verwenden Sie für beide Teile eines Textes denselben Pinsel und ändern Sie den Alpha-Parameter im entsprechenden Bereich. Im Codebeispiel wird der erste Textbereich mit halber Deckkraft (alpha =.5f) angezeigt, während der zweite Textbereich mit voller Deckkraft angezeigt wird (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

Zusätzliche Ressourcen

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 Pinselfarbe in Compose animieren.

Laufschrifteffekt auf Text anwenden

Sie können den Modifikator basicMarquee auf jede zusammensetzbare Funktion anwenden, um einen animierten Scrolleffekt zu erzeugen. Der Laufschrifteffekt tritt auf, wenn der Inhalt zu breit ist, um die verfügbaren Einschränkungen nicht zu erfüllen. 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 Laufschrifteffekt für eine zusammensetzbare Text-Funktion 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.

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Absatz gestalten
• Material Design 2 in Compose
• Grafikmodifikatoren