樣式段落

本頁說明如何設定文字的樣式 例如自動產生影片、音訊 和文章段落的摘要如要設定段落層級樣式,您可以設定下列參數: 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 都會對齊右側 使用字母。

在段落中新增多種樣式

如要在段落中新增多個樣式,可以使用 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")
            }
        }
    )
}

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

調整行高和邊框間距

includeFontPadding 是舊版屬性,會根據 文字指標。 自 Compose BOM 版本 2024.01.01 開始,已設定 includeFontPadding 轉換為 false,讓預設文字版面配置與 常見的設計工具

設定 lineHeight 的功能並非全新功能,現已推出 。您可以使用lineHeightText lineHeight 參數,可在 文字。接著,您可以使用新的 LineHeightStyle API 進一步設定 以及文字與聊天室的對齊方式,以及移除空白字元。

建議使用文字單位「em」(相對字型) 調整 lineHeight 而非「sp」(縮放像素) 以提升精確度。如要進一步瞭解 選取適當的文字單元,請參閱 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.Trim 設定 (LineHeightStyle.Alignment.Center)。

示範 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 在檢視畫面中的運作方式 這些變更,以及 Compose 的變更和新的 LineHeightStyle 相互整合

插入換行符號

LineBreak API 定義了分割文字的條件 多行。您可以在 Text 可組合項的 TextStyle 區塊。預設線條破壞類型 包括:

  • Simple - 快速、基本換行。建議用於文字輸入欄位。
  • Heading - 換行與較破壞的規則。建議用於 Shorts 例如標題
  • 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 語言設計。 使用非 CJK 語言時,您不一定能看見這些 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 可讓您為應用程式新增連字號支援。 連字號是指插入類似破折號的標點符號,藉此表示 文字會分成數行文字啟用時,系統會在以下兩者之間加入連字號: 該字詞在適當的連字號點中。

根據預設,系統不會啟用連字號。如要啟用連字號,請新增 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
                )
            )
        }
    )
)

一個未啟用連字號的段落,且段落已啟用連字號。
  啟用連字號時,以連字號分隔字詞並分成兩行。
圖 4. 沒有啟用連字號的段落 (頂端) 和特定段落 且已啟用連字號的流程 (下圖)。

啟用後,只有在下列情況下才會使用連字號:

  • 文字超出線條本身。如果使用 Simple 換行策略, 或者,只有在一行字元少於單行時,才會出現連字號 字詞。
  • 裝置上設定正確的語言代碼, 依據系統上的字典所做出的判斷