Стиль текста

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

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

Вы не ограничены этой конкретной цветовой схемой или стилем окраски. Хотя мы предоставили простой пример для выделения, используйте любую из встроенных кистей или даже просто 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

Использование кисти по умолчанию с линейным градиентом в качестве стиля для текста.
Рисунок 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 вместе с линейным градиентом для добавления непрозрачности к фрагменту текста.
Рис. 5. Использование параметра buildAnnotatedString и альфа SpanStyle вместе с linearGradient для добавления непрозрачности к фрагменту текста.

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

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

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

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

Следующий фрагмент реализует базовый эффект выделения для составного Text :

@OptIn(ExperimentalFoundationApi::class)
@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 , примененный к тексту.

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