Text
可組合項提供多個可設定內容的選用參數。以下我們列出涵蓋最常見的文字使用方式參數。
如需 Text
的所有參數,請參閱「Compose 文字原始碼」。
每當您設定其中一個參數,您就會套用樣式至整個文字值。如果您需要在同一行或同一段落中套用多種樣式,請參閱「多種內嵌樣式」一節。
常用文字樣式
以下各節說明設定文字樣式的常用方法。
變更文字顏色
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
調整文字大小
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
將文字設為斜體
使用 fontStyle
參數將文字設為斜體 (或設定另一個 FontStyle
)。
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
將文字設為粗體
使用 fontWeight
參數將文字設為粗體 (或設定其他 FontWeight
)。
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
新增陰影
您可以透過 style
參數設定 TextStyle
類型的物件,並設定多個參數,例如陰影。Shadow
會接收陰影色彩、偏移值或與 Text
的相對位置,以及模糊半徑 (即模糊程度)。
@Composable fun TextShadow() { val offset = Offset(5.0f, 10.0f) Text( text = "Hello world!", style = TextStyle( fontSize = 24.sp, shadow = Shadow( color = Color.Blue, offset = offset, blurRadius = 3f ) ) ) }
在文字中新增多種樣式
如要在相同的 Text
可組合項中設定不同樣式,請使用可使用任意註解樣式加上註解的字串 AnnotatedString
。
AnnotatedString
是包含以下的資料類別:
Text
值SpanStyleRange
的List
,等同於文字值內位置範圍的內嵌樣式ParagraphStyleRange
的List
,用於指定文字對齊方式、文字方向、行高和文字縮排樣式
TextStyle
用於 Text
組件中,SpanStyle
和 ParagraphStyle
適用於 AnnotatedString
。如要進一步瞭解一段段落中的多種樣式,請參閱「在一個段落中新增多種樣式」。
AnnotatedString
具有類型安全建構工具,可讓您輕鬆建立:buildAnnotatedString
。
@Composable fun MultipleStylesInText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") } ) }
啟用 Brush
進階樣式設定
如要啟用更進階的文字樣式設定,請將 Brush
API 與 TextStyle
和 SpanStyle
搭配使用。在通常會使用 TextStyle
或 SpanStyle
的任何位置,您現在也可以使用 Brush
。
使用筆刷設定文字樣式
使用 TextStyle
內建的筆刷設定文字。例如,您可以按照下列方式設定 linearGradient
筆刷使用文字:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
影片色彩配置並不限於這個特定色彩配置。雖然我們提供了簡單的醒目顯示範例,但您可以使用任何內建的筆刷,甚至是使用 SolidColor
強化文字。
整合
由於您可以同時使用 Brush
和 TextStyle
和 SpanStyle
,因此能順暢整合 TextField
和 buildAnnotatedString
。
如要進一步瞭解如何在 TextField
中使用筆刷 API,請參閱「使用 Brush API 輸入樣式」。
使用 SpanStyle
設定其他樣式
對文字範圍套用筆刷
如果只想對部分文字套用筆刷,請使用 buildAnnotatedString
和 SpanStyle
API,搭配所需的筆刷和漸層。
Text( text = buildAnnotatedString { append("Do not allow people to dim your shine\n") withStyle( SpanStyle( brush = Brush.linearGradient( colors = rainbowColors ) ) ) { append("because they are blinded.") } append("\nTell them to put some sunglasses on.") } )
文字跨度的不透明度
如要調整特定文字範圍的不透明度,請使用 SpanStyle
的選用 alpha
參數。您可以為文字的兩個部分使用相同的筆刷,並在對應的 Span 中變更 Alpha 參數。在程式碼範例中,第一個文字跨度會以半不透明度 (alpha =.5f
) 顯示,第二個文字則以完全不透明度 (alpha = 1f
) 顯示。
val brush = Brush.linearGradient(colors = rainbowColors) buildAnnotatedString { withStyle( SpanStyle( brush = brush, alpha = .5f ) ) { append("Text in ") } withStyle( SpanStyle( brush = brush, alpha = 1f ) ) { append("Compose ❤️") } }
其他資源
如需其他自訂範例,請參閱「在 Compose 文字顏色上刷新」網誌文章。如要進一步瞭解 Brush
如何與 Animations API 整合,請參閱在 Compose 中為筆刷文字顏色設定動畫。
將跑馬燈效果套用至文字
您可以將 basicMarquee
修飾符套用至任何可組合項,產生動畫捲動效果。如果內容寬度過寬,無法容納所有適用的限制,就會發生「點線框」效果。根據預設,basicMarquee
設有特定設定 (例如速率和初始延遲),但您可以修改這些參數來自訂效果。
下列程式碼片段在 Text
可組合項中導入基本點線框效果:
@OptIn(ExperimentalFoundationApi::class) @Composable fun BasicMarqueeSample() { // Marquee only animates when the content doesn't fit in the max width. Column(Modifier.width(400.dp)) { Text( "Learn about why it's great to use Jetpack Compose", modifier = Modifier.basicMarquee(), fontSize = 50.sp ) } }
圖 6. 套用至文字的 basicMarquee
修飾符
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 設定段落樣式
- Compose 中的質感設計 2
- 圖形修飾符