Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

設定文字樣式

Text 可組合項提供多個選用參數，可用於設定內容樣式。以下列出涵蓋最常見文字用途的參數。如要查看 Text 的所有參數，請參閱 Compose 文字原始碼。

每當您設定其中一個參數，就會將樣式套用至整個文字值。如果您需要在同一行或同一段落中套用多種樣式，請參閱多種內嵌樣式一節。

常見文字樣式

以下各節說明設定文字樣式的常見方式。

變更文字顏色

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}TextSnippets.kt

調整文字大小

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}TextSnippets.kt

將文字設為斜體

使用 fontStyle 參數將文字設為斜體 (或設定另一個 FontStyle)。

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}TextSnippets.kt

將文字設為粗體

使用 fontWeight 參數將文字設為粗體文字 (或設定其他 FontWeight)。

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}TextSnippets.kt

新增陰影

您可以透過 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
            )
        )
    )
}TextSnippets.kt

在文字中加入多種樣式

如要在相同的 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")
        }
    )
}TextSnippets.kt

顯示 HTML，並在文字中加入連結

使用 AnnotatedString.fromHtml()，在 Jetpack Compose 應用程式中顯示 HTML 格式的文字，並提供可點擊的連結。這個函式會將含有 HTML 代碼的字串轉換為 AnnotatedString，以便處理樣式和連結。

範例：含有樣式連結的 HTML

這個程式碼片段會顯示含有連結的 HTML 格式文字，並為連結套用特定樣式：

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}HtmlStyling.kt

程式碼重點

AnnotatedString.fromHtml() 會將 htmlText 字串轉換為 AnnotatedString。linkStyles 參數可自訂連結外觀。
TextLinkStyles 定義 HTML 內連結的樣式。SpanStyle 會設定連結的文字裝飾、字型樣式和顏色。
Text 可組合函式會顯示產生的 AnnotatedString。

結果

這段程式碼片段會將「Jetpack Compose」設為可點擊的連結，並套用藍色、底線和斜體樣式：

H1 標題「Jetpack Compose」，後面接著「Build better apps with Jetpack Compose」，其中 Jetpack Compose 是可點選的連結，樣式為藍色、底線和斜體。 — **圖 2.** 標題和段落，其中段落中的「Jetpack Compose」是可點擊的樣式連結。

使用 `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
        )
    )
)TextSnippets.kt

**圖 3.** 使用 Brush API 的 `linearGradient` 函式，並定義顏色清單。

你不一定要使用這個色彩配置或著色風格。雖然我們提供了一個簡單的醒目顯示範例，但您可以使用任何內建筆刷，甚至只要使用 SolidColor 即可強化文字。

整合

由於 Brush 可與 TextStyle 和 SpanStyle 搭配使用，因此可與 TextField 和 buildAnnotatedString 完美整合。

如要進一步瞭解如何在 TextField 中使用 Brush 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.")
    }
)TextSnippets.kt

使用預設筆刷，並以 linearGradient 做為文字樣式。 — **圖 4.** 使用預設筆刷，並將 `linearGradient` 做為 `Text` 的樣式。

文字範圍的不透明度

如要調整特定文字範圍的不透明度，請使用 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 ❤️")
    }
}TextSnippets.kt

使用 buildAnnotatedString 和 SpanStyle 的 alpha 參數，以及 linearGradient，為文字範圍加上不透明度。 — **圖 5.** 使用 `buildAnnotatedString` 和 `SpanStyle` 的 Alpha 參數，以及 `linearGradient`，為文字範圍加上不透明度。

對文字套用跑馬燈效果

您可以將 basicMarquee 修飾符套用至任何可組合項，產生動畫捲動效果。如果內容太寬，無法容納在可用限制內，就會發生跑馬燈效果。根據預設，basicMarquee 已設定特定設定 (例如速度和初始延遲)，但您可以修改這些參數來自訂效果。

以下程式碼片段會在 Text 可組合項上實作基本跑馬燈效果：

@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
        )
    }
}TextSnippets.kt

圖 6. 套用至文字的 basicMarquee 修飾符。

其他資源

為您推薦

注意：系統會在 JavaScript 關閉時顯示連結文字
設定段落樣式
Compose 中的 Material Design 2
圖形修飾符

設定文字樣式 透過集合功能整理內容 你可以依據偏好儲存及分類內容。