Styl tekstu

Funkcja kompozycyjna Text ma wiele opcjonalnych parametrów, które umożliwiają stylizowanie jej zawartości. Poniżej znajdziesz parametry, które obejmują najczęstsze przypadki użycia tekstu. Wszystkie parametry Text znajdziesz w kodzie źródłowym funkcji Text w Compose.

Gdy ustawisz jeden z tych parametrów, styl zostanie zastosowany do całej wartości tekstowej. Jeśli chcesz zastosować kilka stylów w tym samym wierszu lub akapicie, zapoznaj się z sekcją dotyczącą wielu stylów w tekście.

Typowe style tekstu

W sekcjach poniżej opisano typowe sposoby stylizowania tekstu.

Zmień kolor tekstu

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

Zmień rozmiar tekstu

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

Używanie kursywy

Użyj parametru fontStyle, aby zastosować kursywę (lub ustawić inną wartość FontStyle).

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

Pogrubianie tekstu

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

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

Dodaj cień

Parametr style umożliwia ustawienie obiektu typu TextStyle i skonfigurowanie wielu parametrów, np. cienia. Shadow otrzymuje kolor cienia, przesunięcie, czyli miejsce, w którym się znajduje względem Text, oraz promień rozmycia, który określa, jak bardzo jest rozmyty.

@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

Dodawanie wielu stylów w tekście

Aby ustawić różne style w tym samym komponentu kompozycyjnym Text, użyj AnnotatedString, czyli ciągu znaków, który można opatrzyć adnotacjami o dowolnych stylach.

AnnotatedString to klasa danych zawierająca:

• Wartość Text
• List o wartości SpanStyleRange, co odpowiada stylowi w tekście z zakresem pozycji w wartości tekstowej
• List typu ParagraphStyleRange, który określa wyrównanie tekstu, kierunek tekstu, wysokość wiersza i styl wcięcia tekstu

TextStyle jest przeznaczony do użycia w funkcji kompozycyjnej Text, a SpanStyle i ParagraphStyle – w AnnotatedString. Więcej informacji o wielu stylach w akapicie znajdziesz w artykule Dodawanie wielu stylów w akapicie.

AnnotatedString ma bezpieczny pod względem typów kreator, który 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

Wyświetlanie kodu HTML z linkami w tekście

Użyj AnnotatedString.fromHtml(), aby wyświetlać tekst w formacie HTML z klikalnymi linkami w aplikacji Jetpack Compose. Ta funkcja konwertuje ciąg znaków z tagami HTML na AnnotatedString, co umożliwia stylizowanie i obsługę linków.

Przykład: HTML ze stylizowanym linkiem

Ten fragment kodu renderuje tekst w formacie HTML z linkiem, stosując do niego określony styl:

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}
HtmlStyling.kt

Najważniejsze informacje o kodzie

• Funkcja AnnotatedString.fromHtml() konwertuje ciąg znaków htmlText na AnnotatedString. Parametr linkStyles dostosowuje wygląd linku.

• TextLinkStyles określa styl linków w kodzie HTML. SpanStyle określa dekorację tekstu, styl czcionki i kolor linków.

• Element kompozycyjny Text wyświetla wynikowy obiekt AnnotatedString.

Wynik

Ten fragment kodu umożliwia wyświetlanie tekstu „Jetpack Compose” jako klikalnego linku, który jest sformatowany na niebiesko, podkreślony i pochylony:

Rysunek 2. Nagłówek i akapit, w którym „Jetpack Compose” jest klikalnym, stylizowanym linkiem.

Włącz zaawansowane style za pomocą Brush

Aby włączyć bardziej zaawansowane style tekstu, możesz użyć interfejsu API Brush z TextStyle i SpanStyle. W każdym miejscu, w którym zwykle używasz TextStyle lub SpanStyle, możesz teraz używać Brush.

Używanie pędzla do stylizowania tekstu

Skonfiguruj tekst za pomocą wbudowanego pędzla w 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

Rysunek 3. Użycie funkcji linearGradient interfejsu Brush API ze zdefiniowaną listą kolorów.

Nie musisz ograniczać się do tego konkretnego schematu kolorów ani stylu kolorowania. Chociaż podaliśmy prosty przykład, możesz użyć dowolnego z wbudowanych pędzli lub nawet SolidColor, aby ulepszyć tekst.

Integracje

Brush można używać razem z TextStyle i SpanStyle, więc integracja z TextField i buildAnnotatedString jest bezproblemowa.

Więcej informacji o używaniu interfejsu Brush API w komponencie TextField znajdziesz w artykule Stylizowanie danych wejściowych za pomocą interfejsu Brush API.

Dodatkowe style z użyciem SpanStyle

Stosowanie pędzla do fragmentu tekstu

Jeśli chcesz zastosować pędzel tylko do części tekstu, użyj buildAnnotatedString i interfejsu API SpanStyle wraz z wybranym pędzlem i gradientem.

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

Rysunek 4. Używam domyślnego pędzla z linearGradient jako stylu dla Text.

Przezroczystość we fragmencie tekstu

Aby dostosować przezroczystość określonego fragmentu tekstu, użyj opcjonalnego parametru alpha elementu SpanStyle. Użyj tego samego pędzla do obu części tekstu i zmień parametr alfa w odpowiednim elemencie span. W przykładowym kodzie pierwszy fragment tekstu wyświetla się z przezroczystością na poziomie 50% (alpha =.5f), a drugi z przezroczystością na poziomie 100% (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

Rysunek 5. Używanie parametru alfa buildAnnotatedString i SpanStyle wraz z linearGradient, aby dodać krycie do fragmentu tekstu.

Zastosuj efekt paska informacyjnego do tekstu

Modyfikator basicMarquee możesz zastosować do dowolnego elementu kompozycyjnego, aby uzyskać efekt animowanego przewijania. Efekt paska informacyjnego występuje, gdy treść jest zbyt szeroka, aby zmieścić się w dostępnych ograniczeniach. Domyślnie basicMarquee ma ustawione pewne konfiguracje (takie jak prędkość i początkowe opóźnienie), ale możesz zmodyfikować te parametry, aby dostosować efekt.

Poniższy fragment kodu implementuje podstawowy efekt paska informacyjnego w komponowalnym Text:

@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 zastosowany do tekstu.

Dodatkowe materiały

• Brushing Up on Compose Text Coloring
• Animowanie pędzla do kolorowania tekstu w Compose
• Obsługa wielu linków w jednym ciągu tekstowym