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 ) ) )
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.") } )
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 ❤️") } }
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