Стиль текста

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Компонуемый 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

Отображать 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» в виде интерактивной ссылки, оформленной синим цветом, подчеркнутой и выделенной курсивом:

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

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

Вы можете применить модификатор 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 , примененный к тексту.

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

• Повторяем раскраску текста при создании текста
• Анимационная кисть. Раскраска текста в Compose.
• Поддержка нескольких ссылок в одной текстовой строке.