本頁說明如何設定文字的樣式
例如自動產生影片、音訊
和文章段落的摘要如要設定段落層級樣式,您可以設定下列參數:
textAlign
和 lineHeight
,或定義自己的 ParagraphStyle
。
設定文字對齊方式
textAlign
參數可讓您設定水平方向
對齊
Text
可組合函式介面區域內的文字
根據預設,Text
會根據其選擇自然文字對齊方式
內容價值:
Text
容器的左側邊緣為由左至右的字母,例如 拉丁文、斯拉夫文或韓文Text
容器的右側邊緣為由右到左的字母,例如 阿拉伯文或希伯來文
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
如要手動設定 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") } } ) }
調整行高和邊框間距
includeFontPadding
是舊版屬性,會根據
文字指標。
自 Compose BOM 版本 2024.01.01
開始,已設定 includeFontPadding
轉換為 false
,讓預設文字版面配置與
常見的設計工具
設定 lineHeight
的功能並非全新功能,現已推出
。您可以使用lineHeight
Text
lineHeight
參數,可在
文字。接著,您可以使用新的 LineHeightStyle API
進一步設定
以及文字與聊天室的對齊方式,以及移除空白字元。
建議使用文字單位「em」(相對字型) 調整 lineHeight
而非「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 ) ) ) )
除了調整 lineHeight
外,你現在可以將文字置中並調整樣式
搭配 LineHeightStyle
實驗性 API 使用設定:LineHeightStyle.Alignment
和 LineHeightStyle.Trim
(includeFontPadding
必須設為 false
,
。對齊和剪輯會將兩行之間測量的空間
就能適當地將文字分配至所有行 (一行)
以及文字區塊的頂端
LineHeightStyle.Alignment
定義如何對齊聊天室中的線條
提供的參數在每一行中,您可以將文字與
頂端、底部、置中或按比例調整LineHeightStyle.Trim
將允許你
即可離開或移除第一行頂端和底部的多餘空間
根據任何 lineHeight
和對齊方式所產生文字的最後一行
調整。下列範例顯示多行文字的
置中對齊時,各種 LineHeightStyle.Trim
設定
(LineHeightStyle.Alignment.Center
)。
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
請參閱「修正 Compose 文字中的字型邊框間距」網誌文章來瞭解
進一步瞭解這項變更的背景資訊,以及 includeFontPadding
在檢視畫面中的運作方式
這些變更,以及 Compose 的變更和新的 LineHeightStyle
相互整合
插入換行符號
LineBreak
API 定義了分割文字的條件
多行。您可以在
Text
可組合項的 TextStyle
區塊。預設線條破壞類型
包括:
Simple
- 快速、基本換行。建議用於文字輸入欄位。Heading
- 換行與較破壞的規則。建議用於 Shorts 例如標題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 ) ) } ) )
在上述輸出內容中,請注意 Paragraph
行破壞行為會產生
比起 Simple
行破壞,視覺效果更平衡。
自訂換行符號
您也可以使用 Strategy
建構自己的 LineBreak
設定。
參數。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 ) } ) )
CJK 注意事項
您也可以使用 Strictness
和LineBreak
WordBreak
API,專為 CJK 語言設計。
使用非 CJK 語言時,您不一定能看見這些 API 的效果。整體而言,
斷行規則是根據語言代碼定義。
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 ) )
逐行分割文字
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 ) ) } ) )
啟用後,只有在下列情況下才會使用連字號:
- 文字超出線條本身。如果使用
Simple
換行策略, 或者,只有在一行字元少於單行時,才會出現連字號 字詞。 - 裝置上設定正確的語言代碼, 依據系統上的字典所做出的判斷
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 設定文字樣式
- Compose 版面配置的基本概念
- Compose 版面配置中的內建函式測量資料