Funkcja kompozycyjna Text
ma wiele opcjonalnych parametrów pozwalających określić styl treści.
Poniżej znajdziesz listę parametrów, które służą do typowych zastosowań z użyciem tekstu.
Informacje o wszystkich parametrach właściwości Text
znajdziesz w artykule o kodzie źródłowym tworzenia tekstu.
Gdy ustawisz jeden z tych parametrów, zastosujesz go do całej wartości tekstowej. Jeśli chcesz zastosować wiele stylów w tym samym wierszu lub akapicie, zapoznaj się z sekcją o wielu stylach wbudowanych.
Typowe style tekstu
W tych sekcjach opisano typowe sposoby zmiany stylu tekstu.
Zmień kolor tekstu
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Zmiana rozmiaru tekstu
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
Zastosuj kursywę
Użyj parametru fontStyle
, aby zastosować kursywę (lub ustaw inny parametr FontStyle
).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Pogrubienie tekstu
Użyj parametru fontWeight
, aby pogrubić tekst (lub ustaw inny parametr FontWeight
).
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
Dodaj cień
Parametr style
umożliwia ustawienie obiektu typu TextStyle
i konfigurowanie wielu parametrów, np. cienia.
Shadow
otrzymuje kolor cienia, odsunięcia lub lokalizację względem wymiaru Text
, oraz promienia rozmycia, który odpowiada temu, jak niewyraźne jest to zdjęcie.
@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 ) ) ) }
Dodawanie wielu stylów w tekście
Aby ustawić różne style w tym samym elemencie kompozycyjnym Text
, użyj AnnotatedString
– ciągu znaków, do którego można dodawać adnotacje za pomocą stylów dowolnych adnotacji.
AnnotatedString
to klasa danych, która zawiera:
- Wartość
Text
List
o wartościSpanStyleRange
– odpowiednik stylu wbudowanego z zakresem pozycji w wartości tekstowej.- Parametr
List
zParagraphStyleRange
określający wyrównanie tekstu, kierunek tekstu, wysokość wiersza i styl wcięcia tekstu
Mikrodane TextStyle
można stosować w funkcji kompozycyjnej Text
, a SpanStyle
i ParagraphStyle
– w elemencie AnnotatedString
. Więcej informacji o różnych stylach akapitu znajdziesz w artykule Dodawanie wielu stylów w akapicie.
AnnotatedString
ma narzędzie do tworzenia bezpieczne dla typu, które ułatwia tworzenie: 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") } ) }
Włącz zaawansowane style w Brush
Aby włączyć bardziej zaawansowane style tekstu, możesz użyć interfejsu API Brush
z TextStyle
i SpanStyle
. Możesz też używać Brush
wszędzie tam, gdzie zwykle używasz TextStyle
lub SpanStyle
.
Stylizowanie tekstu za pomocą pędzla
Skonfiguruj tekst za pomocą wbudowanego pędzla w aplikacji TextStyle
. Możesz na przykład skonfigurować pędzel linearGradient
dla tekstu w ten sposób:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
![Korzystanie z funkcji linearGradient w interfejsie Brush API ze zdefiniowaną listą kolorów.](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=2&hl=pl)
linearGradient
interfejsu Brush API ze zdefiniowaną listą kolorów.Nie musisz ograniczać się do tego konkretnego schematu kolorów ani stylu kolorystycznego. Podajemy prosty przykład wyróżniający tekst. Aby go ulepszyć, użyj dowolnych wbudowanych pędzli lub nawet SolidColor
.
Integracje
Ponieważ usługi Brush
możesz używać jednocześnie z usługami TextStyle
i SpanStyle
, integracja z TextField
i buildAnnotatedString
jest płynna.
Więcej informacji o korzystaniu z interfejsu Brush API w obrębie TextField
znajdziesz w artykule na temat stylowego wprowadzania tekstu w interfejsie Brush API.
Dodatkowy styl używający SpanStyle
Zastosuj pędzel do fragmentu tekstu
Jeśli chcesz zastosować pędzel tylko do części tekstu, użyj buildAnnotatedString
i interfejsu API SpanStyle
oraz wybranego pędzla i gradientu.
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.") } )
![Używanie domyślnego pędzla z LinearGradient jako stylu tekstu.](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=2&hl=pl)
linearGradient
jako stylem interfejsu Text
.Przezroczystość w danym zakresie tekstu
Aby dostosować przezroczystość określonego zakresu tekstu, użyj opcjonalnego parametru alpha
narzędzia SpanStyle
. Użyj tego samego pędzla do obu części tekstu i zmień parametr alfa w odpowiednim zakresie.
W przykładowym kodzie pierwszy rozpiętość tekstu jest wyświetlana z połowę przezroczystością (alpha =.5f
), a druga – z pełną przezroczystością (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 ❤️") } }
![Użycie parametru alfa buildAnnotatedString i SpanStyle razem z właściwością linearGradient, aby zwiększyć przezroczystość zakresu tekstu.](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=2&hl=pl)
buildAnnotatedString
i parametru alfa SpanStyle
razem z parametrem linearGradient
w celu dodania przezroczystości do zakresu tekstu.Dodatkowe materiały
Dodatkowe przykłady dostosowywania znajdziesz w poście na blogu Brushing Up on Compose Text Texting. Jeśli chcesz dowiedzieć się więcej o tym, jak interfejs Brush
integruje się z interfejsem Animations API, przeczytaj artykuł na temat kolorowania tekstu pędzla w komponencie.
Zastosuj efekt marki do tekstu
Aby uzyskać efekt animowanego przewijania, możesz zastosować modyfikator basicMarquee
do dowolnego elementu kompozycyjnego. Efekt transparentu pojawia się, gdy treść jest zbyt szeroka i nie mieści się w dostępnych ograniczeniach. Domyślnie basicMarquee
ma ustawione pewne konfiguracje (np. prędkość i opóźnienie początkowe), ale możesz je zmienić, aby dostosować efekt.
Ten fragment kodu implementuje podstawowy efekt zaznaczenia w elemencie kompozycyjnym Text
:
@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 ) } }
Rysunek 6. Modyfikator basicMarquee
został zastosowany do tekstu.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Styl akapitu
- Material Design 2 w obszarze Utwórz
- Modyfikatory graficzne