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) }
Textgröße ändern
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
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) }
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) }
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 ) ) ) }
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
vonSpanStyleRange
, entspricht dem Inline-Stil mit Position Bereich innerhalb des Textwerts - Ein
List
vonParagraphStyleRange
, 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") } ) }
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 ) ) )
![Verwendung der Funktion „linearGradient“ der Brush API mit einer definierten Liste von Farben](https://developer.android.google.cn/static/develop/ui/compose/images/text-designmain.png?authuser=8&hl=de)
linearGradient
der Brush API mit einer definierten Liste von Farben.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.") } )
![Standardpinsel mit „linearGradient“ als Stil für „Text“ verwenden](https://developer.android.google.cn/static/develop/ui/compose/images/text-style.png?authuser=8&hl=de)
linearGradient
als Stil für Text
verwendet.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 ❤️") } }
![Verwenden von buildAnnotatedString und des Alpha-Parameters von SpanStyle in Verbindung mit linearGradient, um einer Textspanne Deckkraft hinzuzufügen.](https://developer.android.google.cn/static/develop/ui/compose/images/text-opacity.png?authuser=8&hl=de)
buildAnnotatedString
und SpanStyle
sowie linearGradient
, um einem Textbereich Deckkraft hinzuzufügen.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 ) } }
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