Styl tekstu

Składnik 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. Informacje o wszystkich parametrach funkcji Text znajdziesz w sekcji Tworzenie tekstu kodu źródłowego.

Ustawiając jeden z tych parametrów, styl jest stosowany do całego wartość tekstową. Jeśli w jednym wierszu chcesz zastosować wiele stylów lub akapitów, patrz sekcja poświęcona wielu treści w tekście Style.

Typowe style tekstu

W sekcjach poniżej znajdziesz opis typowych sposobów określania stylu 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ą

Aby zastosować kursywę do tekstu, użyj parametru fontStyle (albo ustaw inny) 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 skonfigurować wiele parametrów, np. shadow. 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 elementu Text kompozycyjne, użyj funkcji AnnotatedString, ciąg, do którego można dodać adnotacje przy użyciu stylów dowolnych adnotacji.

AnnotatedString to klasa danych zawierająca:

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

Aplikacja TextStyle jest używana w funkcji kompozycyjnej Text, a SpanStyle i ParagraphStyle jest do użytku w AnnotatedString. Aby uzyskać więcej informacji o wielu stylach w przeczytaj sekcję Dodawanie wielu stylów do akapitu.

Plik AnnotatedString zawiera bezpieczne kreator aby ułatwić 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

Włącz zaawansowane style w interfejsie Brush

Aby włączyć bardziej zaawansowane style 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żyć Brush.

Do określania stylu tekstu używaj pędzla

Skonfiguruj tekst za pomocą wbudowanego pędzla w usłudze TextStyle. Na przykład: może 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 ogranicza Cię schemat kolorów ani styl kolorystyczny. Choć Podaliśmy prosty przykład, aby pokazać, jak wykorzystać dowolną z wbudowanych pędzli, a nawet SolidColor, aby ulepszyć 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 TextField znajdziesz w artykule Wprowadzanie stylu za pomocą interfejsu Brush API.

Dodatkowy styl za pomocą SpanStyle

Zastosuj pędzel do rozpiętości 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 rozpiętości tekstu, użyj funkcji SpanStyle opcjonalny parametr alpha. Użyj tego samego pędzla do obu części tekstu i zmień 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

Dodatkowe materiały

Więcej przykładów dostosowywania znajdziesz w poście na blogu Kolorowanie tekstu w edytorze. 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 zaznaczenia do tekstu

Możesz zastosować modyfikator basicMarquee do dowolnego komponentu, 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 pewne 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 został zastosowany do tekstu.

Polecane dla Ciebie

• Uwaga: tekst linku jest wyświetlany, gdy obsługa JavaScript jest wyłączona
• Akapit ze stylem
• Material Design 2 w Compose
• Modyfikatory graficzne