设置段落样式

本页介绍如何为网站设置文本样式, 段落。如要设置段落级样式,你可以配置如下参数: textAlignlineHeight,或者定义您自己的 ParagraphStyle

设置文本对齐方式

借助 textAlign 参数,您可以设置 对齐方式 Text 可组合项的 surface 区域内显示文本。

默认情况下,Text 会根据其内容值选择自然的文字对齐方式:

  • 对于从左到右书写的文字,如拉丁语、西里尔文或朝鲜文,向 Text 容器的左边缘对齐
  • 对于从右到左书写的文字,如阿拉伯语或希伯来语,向 Text 容器的右边缘对齐

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

字词

如果您想手动设置 Text 可组合项的文本对齐方式,请首选 使用 TextAlign.StartTextAlign.End(而非 TextAlign.Left)和 TextAlign.Right,因为它们将解析到 Text 的右边缘 可组合项。例如,TextAlign.End 对于法语文字将向右侧对齐,而对于阿拉伯语文字则将向左侧对齐,但无论对于哪种文字,TextAlign.Right 都将向右侧对齐。

在段落中添加多种样式

如需在段落中添加多种样式,可在段落部分中使用 ParagraphStyle AnnotatedString:可使用任意注解的样式对其进行注解。 一旦有一部分文本标有 ParagraphStyle,该部分就会被 分隔开来,就像在开头使用了换行符一样 end 的值。

有关在文本中添加多种样式的更多信息,请参阅 在文本中添加多种样式

AnnotatedString 具有一个 type-safe 值 构建器 以便更轻松地创建: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")
            }
        }
    )
}

三个段落采用三种不同的样式:蓝色、红色粗体以及纯黑色

调整行高和内边距

includeFontPadding 是一个旧版属性,它根据第一行文字顶部和最后一行文字底部的字体指标添加额外的内边距。 从 Compose BoM 版本 2024.01.01 开始,设置了 includeFontPadding 更改为 false,这会使默认文本布局与 设计工具。

配置 lineHeight 的功能并不新鲜。从 Android Q 就开始提供此功能。您可以使用 lineHeight 参数为 Text 配置 lineHeight,该参数可在每行文本中分布行高。然后,您可以使用新的 LineHeightStyle API 来进一步配置此文本的对齐方式,并移除空格。

为了提高精确度,您可能需要使用文本单位“em”(相对字体大小)而不是“sp”(缩放后的像素)来调整 lineHeight。如需详细了解 选择合适的文本单位,请参阅 TextUnit

此图片以正上方和正下方的线条为基准显示 lineHeight 的度量值。
图 1.您可以使用“对齐”和“剪辑”来调整 lineHeight 集合中的文本,并根据需要去除多余的空格。

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
            )
        )
    )
)

除了调整 lineHeight 之外,您现在还可以进一步居中和设置文本样式 将配置与 LineHeightStyle 实验性 API 搭配使用:LineHeightStyle.AlignmentLineHeightStyle.Trim(对于includeFontPaddingfalse 应先剪辑到作业部分。Alignment 和 Trim 会使用在文本行之间测量到的空间,以便更合理地将其分配给所有行,包括单行文本和文本块的第一行。

LineHeightStyle.Alignment 定义了如何在行高提供的空间内对齐行。在每行中,您可以将文本与顶部、底部、中心或按比例对齐。然后,LineHeightStyle.Trim 可允许您从文本首行顶部或末行底部移除多余空格,这将通过任何 lineHeight 和 Alignment 调整生成。以下示例展示了当对齐居中时 (LineHeightStyle.Alignment.Center),多行文本在各种 LineHeightStyle.Trim 配置下的外观。

展示 LineHeightStyle.Trim.None 的图片 展示 LineHeightStyle.Trim.Both 的图片
LineHeightStyle.Trim.None LineHeightStyle.Trim.Both
展示 LineHeightStyle.Trim.FirstLineTop 的图片 展示 LineHeightStyle.Trim.LastLineBottom 的图片
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

如需了解详情,请参阅修复 Compose Text 中的字体内边距问题博文。 详细了解此变更的上下文,includeFontPadding 如何在 View 中工作 对 Compose 所做的更改和新的 LineHeightStyle API。

插入换行符

LineBreak API 定义了拆分文本时所依据的条件 多行。您可以在 Text 可组合项的 TextStyle 代码块。预设的换行符类型 包括:

  • Simple - 快速且基本的换行符。建议用于文本输入字段。
  • Heading - 换行,换行规则更宽松。推荐使用的简称 文本(例如标题)。
  • Paragraph - 更慢、更高质量的换行符以提高可读性。 建议用于大量文本,例如段落。

以下代码段使用 SimpleParagraph 来指定 换行的行为:

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
                )
            )
        }
    )
)

一个文本块,显示了简单的换行策略与文本
  和段落。显示简单的
换行策略的行长度变化较大。
图 1. 包含简单换行策略的文本块(顶部)与 包含段落优化换行的文本块(底部)。

请注意,在上述输出中,Paragraph 换行行为会生成 与 Simple 换行相比,在视觉上更加均衡。

自定义换行符

您还可以使用 Strategy 构建自己的 LineBreak 配置。 参数。Strategy 可以是以下任意一项:

  • Balanced - 尝试平衡文本的行长度,同时应用 自动断字(如果启用)。建议用于小屏幕设备,例如手表 最大限度地增加显示的文字量。
  • HighQuality - 优化段落以使其更易读,包括 连字符(如果启用)。(应该是除 BalancedSimple。)
  • 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
            )
        }
    )
)

一个段落中包含平衡的换行策略和一个段落
  而没有采用策略使用平衡换行的段落
  策略行长度比默认值更一致。
图 2. 采用Balanced换行策略格式的段落 (顶部)对比采用没有换行策略的段落。

CJK 注意事项

您还可以使用 StrictnessLineBreak WordBreak API:专为 CJK 语言设计。 有时,这些 API 可能无法以非 CJK 语言显示。总体而言, 换行规则根据语言区域进行定义。

Strictness 使用以下代码描述换行符的严格程度 属性:

  • Default - 语言区域的默认违反规则。可能对应于 NormalStrict
  • 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
    )
)

采用“严格程度”和“WordBreak”设置的日语文字与默认文字。
图 3. 已使用 StrictnessWordBreak 设置格式化的文本(顶部) 与仅采用 LineBreak.Heading 格式的文本(底部)。

将文字分为多行(带连字符)

借助 Hyphens API,您可以为应用添加断字支持。 连字符是指插入类似短划线的标点符号,以表示 文本被分为几行。启用后,系统会在 在适当的连字符处显示单词的音节。

默认情况下,未启用断字功能。要启用连字符,请将 在 TextStyle 代码块中将 Hyphens.Auto 用作参数:

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
                )
            )
        }
    )
)

未启用断字功能的段落和启用了断字功能的段落。
  启用断字功能后,系统会用连字符连接的单词将单词分为两行。
图 4. 未启用断字功能的段落(顶部)与段落 (底部)。

启用后,仅在以下条件下才会进行断字:

  • 字词不适合放在一行中。如果您使用 Simple 换行策略, 仅当行短于单个字词时,才会使用连字符 字词。
  • 您的设备已设置适当的语言区域,并视情况使用适当的连字符 使用系统存在的字典来确定。