樣式段落

本頁面說明如何為段落設定文字樣式。如要設定段落層級樣式,您可以設定 textAlignlineHeight 等參數,或自行定義 ParagraphStyle

設定文字對齊方式

textAlign 參數可讓您在 Text 可組合項介面區域內設定文字的水平對齊方式

根據預設,Text 會根據內容值選取自然文字對齊方式:

  • Text 容器的左側邊緣為由左至右的字母,例如拉丁文、斯拉夫文或韓文
  • Text 容器的右側邊緣為由右至左的字母,例如阿拉伯文或希伯來文

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

字詞

如要手動設定 Text 可組合項的文字對齊方式,建議個別使用 TextAlign.StartTextAlign.End,而不要使用 TextAlign.LeftTextAlign.Right,因為它們會根據偏好語言文字方向解析 Text 可組合項的右側邊緣。舉例來說,TextAlign.End 會對齊法文的右側以及阿拉伯文的左側,但無論使用何種字母,TextAlign.Right 都會對齊右側。

在段落中加入多種樣式

如要在段落中加入多種樣式,您可以在 AnnotatedString 中使用 ParagraphStyle,這可使用任意註解樣式加上註解。如果部分文字有加上 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")
            }
        }
    )
}

三個段落分成三種樣式:藍色、紅色、粗體和純黑色

調整行高和邊框間距

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 (includeFontPadding 必須設為 false,剪輯才能正常運作)。對齊和剪輯會將文字行間測量到的空間,更妥善地分配至所有行,包括單行文字和文字區塊的頂行文字。

LineHeightStyle.Alignment 定義如何利用行高所提供的空間將行對齊。在每行中,您可以將文字與頂端、底部、置中或依比例對齊。LineHeightStyle.Trim 則允許您保留或移除文字第一行頂部和最後一行底部的額外空間,這些空間是由任何 lineHeight 和對齊調整所產生。以下範例顯示了置中對齊時 (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 文字中的字型邊框間距」網誌文章,進一步瞭解這項變更的背景資訊,並瞭解 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 注意事項

您也可以使用 StrictnessWordBreak API 自訂 LineBreak,這些 API 專為中日韓語言設計。您可能不會在非中日韓語言中看到這些 API 的效果。整體而言,斷行規則是根據語言代碼定義。

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 行破壞策略,則只有在一行字數少於單一字詞時,才會加上連字號。
  • 裝置會設定適當的語言代碼,因為系統會使用系統中的字典判斷適當的斷字方式。