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. 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 auf dieselbe Linie oder siehe Abschnitt Mehrere Inline-Creatives Stile.

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)

@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 konfigurieren Sie mehrere Parameter, zum Beispiel „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

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

AnnotatedString ist eine Datenklasse, die Folgendes enthält:

• Ein Text-Wert
• Ein 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 einsatzbereit in der Text zusammensetzbaren Funktion, während SpanStyle und ParagraphStyle ist zur Verwendung in AnnotatedString vorgesehen. 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

Erweiterte Stile mit Brush aktivieren

Wenn Sie erweiterte Textstile aktivieren möchten, können Sie die Brush API mit TextStyle und SpanStyle. An jedem Ort, an dem 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. 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

<ph type="x-smartling-placeholder">

</ph>

Sie sind nicht auf dieses spezielle Farbschema oder diesen Farbstil beschränkt. Während Hier ist ein einfaches Beispiel, das zeigt, dass Sie eines der integrierten Pinsel oder SolidColor verwenden, um deinen Text zu optimieren.

Integrationen

Da Sie Brush zusammen mit TextStyle und SpanStyle verwenden können, Integration in TextField und buildAnnotatedString ist 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 des Textes anwenden möchten, verwenden Sie buildAnnotatedString und die SpanStyle API zusammen mit dem Pinsel und 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

<ph type="x-smartling-placeholder">

</ph>

Deckkraft in einem Textbereich

Um die Deckkraft eines bestimmten Textbereichs anzupassen, verwenden Sie die Methode SpanStyle Optionaler alpha-Parameter. Denselben Pinsel für eines Textes und ändern den Alpha-Parameter im entsprechenden Span. 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

<ph type="x-smartling-placeholder">

</ph>

Weitere Informationen

Weitere Anpassungsbeispiele finden Sie unter In „Text schreiben“ nach oben streichen Blogpost zum Thema „Ausmalen“. Wenn Sie mehr über die Informationen zur Integration von Brush in unsere Animations API finden Sie unter Animieren der Pinselfarbe Textfarbe unter „Schreiben“.

Laufschrifteffekt auf Text anwenden

Sie können den Modifikator basicMarquee auf jede zusammensetzbare Funktion anwenden, einen animierten Scrolleffekt erzeugen. Der Laufschrifteffekt tritt auf, wenn der Inhalt ist zu breit für die verfügbaren Einschränkungen. Standardmäßig enthält basicMarquee z. B. Geschwindigkeit und Anfangsverzögerung, ändern Sie diese Parameter, 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