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) }
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
fest.
@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 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 ) ) ) }
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
vonSpanStyleRange
, entspricht dem Inline-Stil mit Positionsbereich innerhalb des Textwerts - Ein
List
vonParagraphStyleRange
, 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") } ) }
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 ) ) )
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.") } )
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 ❤️") } }
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 ) } }
Abbildung 6: Der auf Text angewendete basicMarquee
-Modifikator.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Absatzstil formatieren
- Material Design 2 in Compose
- Grafikmodifikatoren