Styl tekstu

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)
}
TextSnippets.kt

Słowa

Zmiana rozmiaru tekstu

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

Słowa

Zastosuj kursywę

Użyj parametru fontStyle, aby zastosować kursywę (lub ustaw inny parametr FontStyle).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

Słowa

Pogrubienie tekstu

Użyj parametru fontWeight, aby pogrubić tekst (lub ustaw inny parametr FontWeight).

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

Słowa

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
            )
        )
    )
}
TextSnippets.kt

Słowa

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ści SpanStyleRange – odpowiednik stylu wbudowanego z zakresem pozycji w wartości tekstowej.
  • Parametr List z ParagraphStyleRange 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")
        }
    )
}
TextSnippets.kt

Słowa

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
        )
    )
)
TextSnippets.kt

Korzystanie z funkcji linearGradient w interfejsie Brush API ze zdefiniowaną listą kolorów.
Rysunek 2. Korzystanie z funkcji 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.")
    }
)
TextSnippets.kt

Używanie domyślnego pędzla z LinearGradient jako stylu tekstu.
Rysunek 4. Używanie domyślnego pędzla z 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 ❤️")
    }
}
TextSnippets.kt

Użycie parametru alfa buildAnnotatedString i SpanStyle razem z właściwością linearGradient, aby zwiększyć przezroczystość zakresu tekstu.
Rysunek 5. Użycie funkcji 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
        )
    }
}
TextSnippets.kt

Rysunek 6. Modyfikator basicMarquee został zastosowany do tekstu.