Стиль текста

У компонуемого 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. 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 composable, тогда как 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

Слова

Отображение HTML со ссылками в тексте

Используйте AnnotatedString.fromHtml() для отображения текста в формате HTML с кликабельными ссылками в приложении Jetpack Compose. Эта функция преобразует строку с тегами HTML в AnnotatedString , что позволяет выполнять стилизацию и обработку ссылок.

Пример: HTML со стилизованной ссылкой

Этот фрагмент отображает текст в формате HTML со ссылкой, применяя к ссылке определенный стиль: 

@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

Ключевые моменты кодекса

  • AnnotatedString.fromHtml() преобразует строку htmlText в AnnotatedString . Параметр linkStyles настраивает внешний вид ссылки.

  • TextLinkStyles определяет стиль ссылок в HTML. SpanStyle задает оформление текста, стиль шрифта и цвет для ссылок.

  • Компонуемый Text отображает полученную AnnotatedString .

Результат

Этот фрагмент позволяет сделать «Jetpack Compose» кликабельной ссылкой, выделенной синим цветом, подчеркнутой и курсивом:

Заголовок H1 «Jetpack Compose», за которым следует «Создавайте более качественные приложения с помощью Jetpack Compose», где Jetpack Compose — это кликабельная ссылка, оформленная синим цветом, подчеркиванием и курсивом.
Рисунок 2. Заголовок и абзац, где «Jetpack Compose» в абзаце — это кликабельная стилизованная ссылка.

Включите расширенную стилизацию с помощью 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

Использование функции `linearGradient` API Brush с определенным списком цветов.
Рисунок 3. Использование функции linearGradient API Brush с определенным списком цветов.

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

Интеграции

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

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

Дополнительная стилизация с использованием SpanStyle

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

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

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

Использование кисти по умолчанию с linearGradient в качестве стиля для текста.
Рисунок 4. Использование кисти по умолчанию с linearGradient в качестве стиля для Text .
Непрозрачность в текстовом диапазоне

Чтобы настроить непрозрачность определенного диапазона текста, используйте необязательный параметр 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

Использование buildAnnotatedString и параметра альфа SpanStyle, а также linearGradient для добавления непрозрачности к диапазону текста.
Рисунок 5. Использование buildAnnotatedString и параметра alpha SpanStyle , а также linearGradient для добавления непрозрачности к диапазону текста.

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

Вы можете применить модификатор basicMarquee к любому компонуемому объекту, чтобы создать эффект анимированной прокрутки. Эффект marquee возникает, если содержимое слишком широкое, чтобы вписаться в доступные ограничения. По умолчанию 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 , примененный к тексту.

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

{% дословно %} {% endverbatim %} {% дословно %} {% endverbatim %}