Компонуемый Text
имеет несколько дополнительных параметров для стилизации его содержимого. Ниже мы перечислили параметры, которые охватывают наиболее распространенные случаи использования текста. Все параметры Text
см. в исходном коде Compose Text .
Всякий раз, когда вы устанавливаете один из этих параметров, вы применяете стиль ко всему текстовому значению. Если вам нужно применить несколько стилей в одной строке или абзаце, см. раздел о нескольких встроенных стилях .
Общие стили текста
В следующих разделах описаны распространенные способы стилизации текста.
Изменить цвет текста
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Изменить размер текста
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
Сделать текст курсивом
Используйте параметр fontStyle
, чтобы выделить текст курсивом (или установите другой FontStyle
).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Сделать текст жирным
Используйте параметр fontWeight
для выделения текста жирным шрифтом (или установите другой FontWeight
).
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
Добавить тень
Параметр 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 ) ) ) }
Добавить несколько стилей в текст
Чтобы установить разные стили в одном и том же компонуемом 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") } ) }
Включите расширенный стиль с помощью 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 ) ) )
![Использование функции «linearGradient» Brush API с определенным списком цветов.](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=9&hl=ru)
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.") } )
![Использование кисти по умолчанию с линейным градиентом в качестве стиля для текста.](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=9&hl=ru)
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 ❤️") } }
![Использование параметра buildAnnotatedString и альфа SpanStyle вместе с линейным градиентом для добавления непрозрачности к фрагменту текста.](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=9&hl=ru)
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 ) } }
Рисунок 6. Модификатор basicMarquee
, примененный к тексту.
Рекомендуется для вас
- Примечание. Текст ссылки отображается, когда JavaScript отключен.
- Стиль абзаца
- Material Design 2 в Compose
- Графические модификаторы