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 zur Nutzung vorgesehen
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 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") } ) }
Erweiterte Stile mit Brush
aktivieren
Wenn Sie erweiterte Textformatierungen verwenden 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 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 ) ) )
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.
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 Textabschnitt 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.") } )
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 ❤️") } }
Weitere Informationen
Weitere Beispiele für Anpassungen finden Sie im Blogpost Brushing Up on Compose Text Coloring (Textfarben in der Funktion „Text verfassen“ aktualisieren). Wenn Sie mehr über die
Informationen zur Integration von Brush
in unsere Animations API finden Sie unter Animieren der Pinselfarbe Textfarbe
unter „Schreiben“.
Text mit dem Marquee-Effekt versehen
Sie können den Modifikator basicMarquee
auf jedes Kompositionen anwenden, um einen animierten Scrolleffekt zu erzielen. Der Laufschrifteffekt tritt auf, wenn der Inhalt
ist zu breit für die verfügbaren Einschränkungen. Standardmäßig sind für basicMarquee
bestimmte Konfigurationen (z. B. Geschwindigkeit und anfängliche Verzögerung) festgelegt. Du kannst diese Parameter jedoch ändern, um den Effekt anzupassen.
Mit dem folgenden Snippet wird ein grundlegender Laufschrifteffekt für eine zusammensetzbare Text
-Funktion implementiert:
@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 der compose-Ansicht
- Grafikmodifikatoren