Стиль текста

Компонуемый Text имеет несколько дополнительных параметров для стилизации его содержимого. Ниже мы перечислили параметры, которые охватывают наиболее распространенные случаи использования текста. Все параметры Text см. в исходном коде Compose Text .

Всякий раз, когда вы устанавливаете один из этих параметров, вы применяете стиль ко всему текстовому значению. Если вам нужно применить несколько стилей в одной строке или абзаце, см. раздел о нескольких встроенных стилях .

Общие стили текста

В следующих разделах описаны распространенные способы стилизации текста.

Изменить цвет текста

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

Изменить размер текста

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

Сделать текст курсивом

Используйте параметр fontStyle , чтобы выделить текст курсивом (или установите другой FontStyle ).

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

Сделать текст жирным

Используйте параметр fontWeight для выделения текста жирным шрифтом (или установите другой FontWeight ).

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

Добавить тень

Параметр style позволяет вам установить объект типа TextStyle и настроить несколько параметров, например тень. Shadow получает цвет тени, смещение или место ее расположения относительно Text и радиус размытия, который определяет, насколько размытой она выглядит.

@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

Добавить несколько стилей в текст

Чтобы установить разные стили в одном и том же компонуемом Text , используйте AnnotatedString — строку, которая может быть аннотирована стилями произвольных аннотаций.

AnnotatedString — это класс данных, содержащий:

• Text значение
• List SpanStyleRange , эквивалентный встроенному стилю с диапазоном позиций внутри текстового значения.
• List ParagraphStyleRange , определяющий выравнивание текста, направление текста, высоту строки и стиль отступа текста.

TextStyle предназначен для использования в компонуемом Text , тогда как SpanStyle и ParagraphStyle предназначены для использования в AnnotatedString . Дополнительные сведения о нескольких стилях в абзаце см. в разделе Добавление нескольких стилей в абзац .

AnnotatedString имеет типобезопасный конструктор , упрощающий создание: 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

Включите расширенный стиль с помощью Brush

Чтобы включить более продвинутое оформление текста, вы можете использовать API Brush с TextStyle и SpanStyle . В любом месте, где вы обычно используете TextStyle или SpanStyle , теперь вы также можете использовать Brush .

Используйте кисть для стилизации текста

Настройте свой текст с помощью встроенной кисти в TextStyle . Например, вы можете настроить кисть linearGradient для вашего текста следующим образом:

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

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

Вы не ограничены этой конкретной цветовой схемой или стилем окраски. Хотя мы предоставили простой пример для выделения, используйте любую из встроенных кистей или даже просто SolidColor чтобы улучшить текст.

Интеграции

Поскольку вы можете использовать Brush вместе с TextStyle и SpanStyle , интеграция с TextField и buildAnnotatedString происходит без проблем.

Дополнительные сведения об использовании API кисти в TextField см. в разделе Ввод стиля с помощью API кисти .

Дополнительный стиль с использованием SpanStyle

Применение кисти к фрагменту текста

Если вы хотите применить кисть только к частям текста, используйте buildAnnotatedString и SpanStyle API, а также выбранную кисть и градиент.

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

Непрозрачность фрагмента текста

Чтобы настроить непрозрачность определенного фрагмента текста, используйте необязательный параметр alpha SpanStyle . Используйте одну и ту же кисть для обеих частей текста и измените параметр альфа в соответствующем диапазоне. В примере кода первый фрагмент текста отображается с половинной непрозрачностью ( alpha =.5f ), а второй — с полной непрозрачностью ( 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

Дополнительные ресурсы

Дополнительные примеры настройки см. в записи блога «Очистка раскраски текста» . Если вам интересно узнать больше о том, как Brush интегрируется с нашим API анимации, см. раздел Анимация раскраски текста кисти в Compose .

Применить эффект выделения к тексту

Вы можете применить модификатор basicMarquee к любому составному объекту, чтобы создать эффект анимированной прокрутки. Эффект выделения возникает, если содержимое слишком велико и не помещается в доступные ограничения. По умолчанию в basicMarquee установлены определенные конфигурации (например, скорость и начальная задержка), но вы можете изменить эти параметры, чтобы настроить эффект.

Следующий фрагмент реализует базовый эффект выделения для составного 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

Рисунок 6. Модификатор basicMarquee , примененный к тексту.