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, styl zostanie zastosowany 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 inline.

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

Słowa

Zmiana rozmiaru tekstu

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

Słowa

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

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 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

Słowa

Dodawanie wielu stylów do tekstu

Aby ustawić różne style w ramach tego samego elementu 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 wbudowanej 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

Słowa

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 w ten sposób:

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

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

Używanie funkcji linearGradient interfejsu Brush API z określoną listą kolorów.
Rysunek 2. Używanie funkcji linearGradient interfejsu Brush API z określoną listą kolorów.

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

Użycie domyślnego pędzla z linearGradient jako stylu tekstu.
Rysunek 4. Używanie domyślnego pędzla z linearGradient jako stylu dla Text.
Przezroczystość w zakresie tekstu

Aby dostosować przezroczystość określonego fragmentu tekstu, użyj opcjonalnego parametru alpha w SpanStyle. Użyj tego samego pędzla do obu części tekstu i zmodyfikuj parametr alfa w odpowiednim 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

Użycie parametru alpha w elementach buildAnnotatedString i SpanStyle oraz linearGradient do dodania przezroczystości do zakresu tekstu.
Rysunek 5. Używanie parametru alfa buildAnnotatedString i SpanStyle oraz linearGradient w celu dodania przezroczystości do fragmentu tekstu.

Dodatkowe materiały

Więcej przykładów dostosowywania znajdziesz w poście na blogu Kolorowanie tekstu w edytorze tekstu. Jeśli chcesz dowiedzieć się więcej o tym, jak Brush integruje się z naszym interfejsem API animacji, przeczytaj artykuł Animowanie kolorowania tekstu za pomocą pędzla w Compose.

Zastosuj efekt ramki do tekstu

Możesz zastosować modyfikator basicMarquee do dowolnego komponentu, aby uzyskać efekt animowanego przewijania. Efekt marquee występuje, gdy treść jest zbyt szeroka, 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.