Стиль абзаца

На этой странице описано, как стилизовать текст для абзаца. Чтобы установить стиль на уровне абзаца, вы можете настроить такие параметры, как textAlign и lineHeight , или определить свой собственный ParagraphStyle .

Установить выравнивание текста

Параметр textAlign позволяет задать горизонтальное выравнивание текста в области компонуемой поверхности Text .

По умолчанию Text выберет естественное выравнивание текста в зависимости от значения его содержимого:

• Левый край контейнера Text для алфавитов с письмом слева направо, таких как латиница, кириллица или хангыль.
• Правый край контейнера Text для алфавитов с письмом справа налево, таких как арабский или иврит.

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

Если вы хотите вручную установить выравнивание текста составного Text , предпочитайте использовать TextAlign.Start и TextAlign.End вместо TextAlign.Left и TextAlign.Right соответственно, поскольку они разрешаются по правому краю составного Text в зависимости от предпочтительного языка. ориентация текста. Например, TextAlign.End выравнивается по правой стороне для французского текста и по левой стороне для арабского текста, но TextAlign.Right выравнивается по правой стороне независимо от того, какой алфавит используется.

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

Чтобы добавить несколько стилей в абзац, вы можете использовать ParagraphStyle в AnnotatedString , который может быть снабжен стилями произвольных аннотаций. Как только часть вашего текста помечена ParagraphStyle , эта часть отделяется от остального текста, как если бы в начале и конце у нее были переводы строк.

Дополнительные сведения о добавлении нескольких стилей в текст см. в разделе Добавление нескольких стилей в текст .

AnnotatedString имеет типобезопасный конструктор , упрощающий создание: buildAnnotatedString . Следующий фрагмент использует buildAnnotatedString для установки ParagraphStyle :

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}
TextSnippets.kt

Отрегулируйте высоту строки и отступы

includeFontPadding — это устаревшее свойство, которое добавляет дополнительные отступы на основе показателей шрифта вверху первой строки и внизу последней строки текста. Начиная с версии Compose BOM 2024.01.01 , для параметра includeFontPadding по умолчанию установлено значение false , что приводит макет текста по умолчанию в большее соответствие с распространенными инструментами дизайна.

Возможность настройки lineHeight не нова — она доступна начиная с Android Q. Вы можете настроить lineHeight для Text с помощью параметра lineHeight , который распределяет высоту строки в каждой строке текста. Затем вы можете использовать новый LineHeightStyle API для дальнейшей настройки выравнивания этого текста в пространстве и удаления пробелов.

Для повышения точности вы можете настроить lineHeight , используя текстовую единицу «em» (относительный размер шрифта) вместо «sp» (масштабированные пиксели). Дополнительные сведения о выборе подходящего текстового блока см. в разделе TextUnit .

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)
TextSnippets.kt

В дополнение к настройке lineHeight теперь вы можете дополнительно центрировать и стилизовать текст, используя конфигурации с помощью экспериментального API LineHeightStyle : LineHeightStyle.Alignment и LineHeightStyle.Trim (для работы Trim для параметра includeFontPadding должно быть установлено значение false ). Функции «Выравнивание» и «Обрезка» используют измеренное пространство между строками текста, чтобы более правильно распределить его по всем строкам, включая одну строку текста и верхнюю строку блока текста.

LineHeightStyle.Alignment определяет, как выровнять строку в пространстве, предусмотренном высотой строки. Внутри каждой строки вы можете выровнять текст по верху, низу, центру или пропорционально. LineHeightStyle.Trim затем позволяет вам оставить или удалить дополнительное пространство вверху первой строки и внизу последней строки вашего текста, созданное в результате любых настроек lineHeight и Alignment. В следующих примерах показано, как выглядит многострочный текст с различными конфигурациями LineHeightStyle.Trim при выравнивании по центру ( LineHeightStyle.Alignment.Center ).

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

См. публикацию в блоге «Исправление заполнения шрифта при составлении текста», чтобы узнать больше о контексте этого изменения, о том, как includeFontPadding работает в системе View, а также об изменениях, внесенных в Compose и новых API-интерфейсах LineHeightStyle .

Вставить разрывы строк

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

• Simple — быстрый, простой разрыв строки. Рекомендуется для полей ввода текста.
• Heading — разрыв строки с более мягкими правилами разрыва. Рекомендуется для короткого текста, например заголовков.
• Paragraph — более медленный и качественный перенос строк для улучшения читаемости. Рекомендуется для больших объемов текста, например абзацев.

В следующем фрагменте кода используются как Simple , так и Paragraph чтобы указать поведение разрыва строк в длинном блоке текста:

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)
TextSnippets.kt

Обратите внимание, что в приведенном выше выводе поведение разрыва строки Paragraph дает более визуально сбалансированный результат, чем Simple разрыв строки.

Настроить разрывы строк

Вы также можете создать свою собственную конфигурацию LineBreak с помощью параметра Strategy . Strategy может быть любой из следующих:

• Balanced — пытается сбалансировать длину строк текста, а также применяет автоматический перенос, если он включен. Рекомендуется для небольших экранов, например часов, чтобы максимизировать объем отображаемого текста.
• HighQuality — оптимизирует абзац для более читаемого текста, включая расстановку переносов, если он включен. (Должно быть значением по умолчанию для всего, что не является Balanced или Simple .)
• Simple — базовая, быстрая стратегия. Если этот параметр включен, переносы выполняются только для слов, которые не умещаются на всей строке. Полезно для редактирования текста, чтобы избежать изменения позиции во время набора текста.

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

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)
TextSnippets.kt

Соображения CJK

Вы также можете настроить LineBreak с помощью API-интерфейсов Strictness и WordBreak , которые были разработаны специально для языков CJK . Вы не всегда можете увидеть эффекты этих API на языках, отличных от CJK. В целом правила разрыва строк определяются на основе локали.

Strictness описывает строгость разрыва строки со следующими свойствами:

• Default — правила нарушения по умолчанию для локали. Может соответствовать Normal или Strict .
• Loose — Наименее ограничительные правила. Подходит для коротких линий.
• Normal — наиболее распространенные правила разрыва строки.
• Strict — самые строгие правила переноса строк.

WordBreak определяет, как разрывы строк должны быть вставлены в слова со следующими свойствами:

• Default — правила нарушения по умолчанию для локали.
• Phrase — разрыв строки основан на фразах.

В следующем фрагменте кода для японского текста используются параметры « Strict строгость» и «Разбиение слов Phrase :

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)
TextSnippets.kt

Перенос текста, разбитого на строки

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

По умолчанию расстановка переносов не включена. Чтобы включить расстановку переносов, добавьте Hyphens.Auto в качестве параметра в блоке TextStyle :

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)
TextSnippets.kt

Если этот параметр включен, расстановка переносов происходит только при следующих условиях:

• Слово не помещается в строку. Если вы используете стратегию Simple разрыва строки, перенос слова происходит только в том случае, если строка короче отдельного слова.
• На вашем устройстве установлена ​​соответствующая локаль, а соответствующие переносы определяются с помощью словарей, имеющихся в системе.

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

Рекомендуется для вас

• Примечание. Текст ссылки отображается, когда JavaScript отключен.
• Стиль текста
• Основы составления макета
• Внутренние измерения в макетах Compose

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