Styl tekstu

Komponent Text ma wiele opcjonalnych parametrów, które umożliwiają nadanie stylów jego zawartości. Poniżej podajemy listę parametrów, które obejmują najczęściej używane przypadki użycia tekstu. Wszystkie parametry Text znajdziesz w źródłowym kodzie źródłowym funkcji ComposeText.

Gdy ustawisz jeden z tych parametrów, zastosujesz styl do całej wartości tekstu. Jeśli chcesz zastosować wiele stylów w tym samym wierszu lub akapicie, przeczytaj sekcję o wielu stylach wstawianych w tekście.

Typowe stylizacje tekstu

W sekcjach poniżej znajdziesz opis typowych sposobów stylizacji tekstu.

Zmiana koloru tekstu

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

Zmiana rozmiaru tekstu

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

Ustaw tekst kursywą

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

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

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

Dodaj cień

Parametr style umożliwia ustawienie obiektu typu TextStyle i skonfigurowanie wielu parametrów, na przykład cienia. Shadow otrzymuje kolor cienia, przesunięcia lub położenia względem Text oraz promień rozmycia, który określa, jak bardzo jest rozmyte.

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

Aby ustawić różne style w ramach tego samego komponentu Text, użyj parametru AnnotatedString, czyli ciągu znaków, który można opatrzyć adnotacjami o dowolnym stylu.

AnnotatedString to klasa danych zawierająca:

• Wartość Text
• List SpanStyleRange, co jest równoważne stylizacji wstawianej z zakresem pozycji w wartości tekstu
• List ParagraphStyleRange określający wyrównanie tekstu, kierunek tekstu, wysokość wiersza i styl wcięcia tekstu

TextStyle służy do korzystania z komponentu Text, a SpanStyle i ParagraphStyle – do korzystania z komponentu AnnotatedString. Więcej informacji o używaniu wielu stylów w akapicie znajdziesz w artykule Dodawanie wielu stylów w akapicie.

AnnotatedString ma konstruktor z funkcją ochrony typu, 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świetlać kod HTML z linkami w tekście;

Użyj AnnotatedString.fromHtml(), aby wyświetlić 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 stylowanie i obsługę linków.

Przykład: HTML z linkiem w stylu

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

@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() zamienia ciąg znaków htmlText na AnnotatedString. Parametr linkStyles pozwala dostosować wygląd linku.

• TextLinkStyles określa styl linków w kodzie HTML. SpanStyle określa sposób zdobienia tekstu, styl czcionki i kolor linków.

• Element kompozycyjny Text wyświetla wynik AnnotatedString.

Wynik

Ten fragment kodu umożliwia wyświetlenie „Jetpack Compose” jako klikalnego linku w kolorze niebieskim, podkreślonego i kursywy:

Włącz zaawansowane stylizowanie za pomocą Brush

Aby umożliwić bardziej zaawansowane formatowanie tekstu, możesz użyć interfejsu API Brush z TextStyle i SpanStyle. W dowolnym miejscu, w którym zwykle używasz TextStyle lub SpanStyle, możesz teraz też używać Brush.

Stylizowanie tekstu za pomocą pędzla

Skonfiguruj tekst za pomocą wbudowanego pędzla w TextStyle. Możesz na przykład skonfigurować pędzel linearGradient do tekstu w ten sposób:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Nie musisz ograniczać się do tego konkretnego schematu kolorów ani stylu kolorowania. Chociaż w tym artykule znajdziesz prosty przykład wyróżnienia, możesz użyć dowolnego wbudowanego pędzla lub nawet SolidColor, aby wzbogacić tekst.

Integracje

Ponieważ możesz używać Brush razem z TextStyle i SpanStyle, integracja z TextField i buildAnnotatedString jest płynna.

Więcej informacji o używaniu interfejsu Brush API w ramach TextField znajdziesz w artykule Dodawanie stylów za pomocą interfejsu Brush API.

Dodatkowy styl za pomocą SpanStyle

Stosowanie pędzla do zakresu tekstu

Jeśli chcesz zastosować pędzel tylko do części tekstu, użyj interfejsu buildAnnotatedString i interfejsu API SpanStyle oraz pędzla i gradientu do wyboru.

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

Przezroczystość w zakresie tekstu

Aby dostosować przezroczystość określonego fragmentu tekstu, użyj opcjonalnego parametru alpha w elementach SpanStyle. Użyj tego samego pędzla do obu części tekstu i zmień parametr alfa w odpowiadającym mu zakresie. W przykładowym kodzie pierwszy fragment tekstu jest wyświetlany z połową krycia (alpha =.5f), a drugi z pełną krycią (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

Zastosuj efekt ramki do tekstu

Możesz zastosować modyfikator basicMarquee do dowolnego kompozytu, aby uzyskać efekt animowanego przewijania. Efekt marquee występuje, gdy treści są zbyt szerokie, aby zmieścić się w dostępnych ograniczeniach. Domyślnie basicMarquee ma określone konfiguracje (takie jak prędkość i opóźnienie początkowe), ale możesz zmodyfikować te parametry, aby dostosować efekt.

Ten fragment kodu implementuje podstawowy efekt ramki na komponencie 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

• Używanie funkcji „Brush Up” do kolorowania tekstu w komponencie
• Animowanie kolorowania tekstu za pomocą pędzla w sekcji Tworzenie
• Obsługa wielu linków w pojedynczym ciągu tekstowym