Văn bản kiểu

Thành phần kết hợp Text có nhiều tham số tuỳ chọn để tạo kiểu cho nội dung. Dưới đây là danh sách các tham số bao gồm hầu hết các trường hợp phổ biến nhất có sử dụng văn bản. Để xem tất cả các tham số của Text, hãy xem mã nguồn văn bản trong Compose.

Bất cứ khi nào bạn cài đặt một trong các tham số này, tức là bạn đang áp dụng một kiểu cho toàn bộ giá trị văn bản. Nếu bạn cần áp dụng nhiều kiểu trong cùng một dòng hoặc đoạn, hãy xem mục nhiều kiểu trong cùng dòng.

Các kiểu văn bản phổ biến

Các phần sau đây mô tả những cách phổ biến để tạo kiểu cho văn bản.

Thay đổi màu văn bản

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

Thay đổi cỡ chữ

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

In nghiêng văn bản

Sử dụng tham số fontStyle để in nghiêng văn bản (hoặc đặt FontStyle khác).

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

In đậm văn bản

Dùng thông số fontWeight để in đậm văn bản (hoặc đặt một giá trị khác FontWeight).

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

Thêm bóng

Thông số style cho phép bạn đặt một đối tượng thuộc loại TextStyle và định cấu hình nhiều thông số, chẳng hạn như bóng. Shadow nhận được màu cho bóng đổ, độ lệch hoặc vị trí màu nằm dọc trên Text và bán kính làm mờ trông như thế nào.

@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

Thêm nhiều kiểu trong một văn bản

Để đặt các kiểu khác nhau trong cùng một Text composable, hãy sử dụng một AnnotatedString, một chuỗi có thể được chú thích theo kiểu tuỳ ý.

AnnotatedString là một lớp dữ liệu chứa:

• Một giá trị Text
• List của SpanStyleRange, tương đương với định kiểu trong cùng dòng với phạm vi vị trí trong giá trị văn bản
• List của ParagraphStyleRange, xác định cách căn chỉnh văn bản, câu lệnh văn bản, chiều cao dòng và kiểu thụt lề văn bản

TextStyle được sử dụng trong thành phần kết hợp Text, trong khi SpanStyle và ParagraphStyle là để sử dụng trong AnnotatedString. Để biết thêm thông tin về nhiều kiểu trong một đoạn văn, hãy xem Thêm nhiều kiểu trong một đoạn văn.

AnnotatedString có trình tạo loại an toàn để dễ dàng tạo: 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

Hiển thị HTML có đường liên kết trong văn bản

Sử dụng AnnotatedString.fromHtml() để hiển thị văn bản được định dạng HTML có đường liên kết có thể nhấp vào trong ứng dụng Jetpack Compose. Hàm này chuyển đổi một chuỗi có thẻ HTML thành AnnotatedString, cho phép định kiểu và xử lý đường liên kết.

Ví dụ: HTML có đường liên kết được tạo kiểu

Đoạn mã này kết xuất văn bản được định dạng HTML có đường liên kết, áp dụng kiểu cụ thể cho đường liên kết:

@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

Các điểm chính về mã

• AnnotatedString.fromHtml() chuyển đổi chuỗi htmlText thành AnnotatedString. Tham số linkStyles tuỳ chỉnh giao diện đường liên kết.

• TextLinkStyles xác định kiểu cho các đường liên kết trong HTML. SpanStyle đặt kiểu trang trí văn bản, kiểu phông chữ và màu cho các đường liên kết.

• Thành phần kết hợp Text hiển thị AnnotatedString kết quả.

Kết quả

Đoạn mã này cho phép "Jetpack Compose" làm đường liên kết có thể nhấp vào, được tạo kiểu bằng màu xanh dương, gạch chân và in nghiêng:

Hình 2. Một tiêu đề và đoạn văn, trong đó 'Jetpack Compose' trong đoạn văn là một đường liên kết có thể nhấp vào và được tạo kiểu.

Bật tính năng tạo kiểu nâng cao bằng Brush

Để bật tính năng tạo kiểu văn bản nâng cao hơn, bạn có thể sử dụng API Brush với TextStyle và SpanStyle. Ở bất kỳ vị trí nào mà bạn thường sử dụng TextStyle hoặc SpanStyle, giờ đây bạn cũng có thể sử dụng Brush.

Sử dụng bút vẽ để tạo kiểu văn bản

Định cấu hình văn bản bằng bút vẽ tích hợp trong TextStyle. Ví dụ: bạn có thể định cấu hình bút vẽ linearGradient cho văn bản như sau:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Hình 3. Sử dụng hàm linearGradient của API Brush với danh sách màu đã xác định.

Bạn không bị giới hạn ở bảng phối màu hoặc kiểu tô màu cụ thể này. Mặc dù chúng tôi đã cung cấp một ví dụ đơn giản để làm nổi bật, hãy sử dụng bất kỳ bút vẽ tích hợp nào hoặc thậm chí chỉ cần SolidColor để cải thiện văn bản.

Các công cụ tích hợp

Vì bạn có thể sử dụng Brush cùng với cả TextStyle và SpanStyle, nên việc tích hợp với TextField và buildAnnotatedString diễn ra liền mạch.

Để biết thêm thông tin về cách sử dụng API bút vẽ trong TextField, hãy xem Tạo kiểu cho dữ liệu đầu vào bằng API bút vẽ.

Tạo kiểu bổ sung bằng SpanStyle

Áp dụng bút vẽ cho một khoảng văn bản

Nếu bạn chỉ muốn áp dụng bút vẽ cho một số phần của văn bản, hãy sử dụng buildAnnotatedString và API SpanStyle, cùng với bút vẽ và độ dốc mà bạn chọn.

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

Hình 4. Sử dụng bút vẽ mặc định với linearGradient làm kiểu cho Text.

Độ mờ trong một khoảng văn bản

Để điều chỉnh độ mờ của một khoảng văn bản cụ thể, hãy sử dụng SpanStyle's tham số alpha tuỳ chọn. Sử dụng cùng một bút vẽ cho cả hai phần của văn bản và thay đổi tham số alpha trong khoảng tương ứng. Trong mã mẫu, khoảng văn bản đầu tiên hiển thị ở độ mờ một nửa (alpha =.5f) trong khi khoảng thứ hai hiển thị ở độ mờ hoàn toàn (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

Hình 5. Sử dụng tham số alpha của buildAnnotatedString và SpanStyle, cùng với linearGradient để thêm độ mờ cho một khoảng văn bản.

Áp dụng hiệu ứng marquee cho văn bản

Bạn có thể áp dụng đối tượng sửa đổi basicMarquee cho bất kỳ thành phần kết hợp nào để tạo hiệu ứng cuộn ảnh động. Hiệu ứng marquee xảy ra nếu nội dung quá rộng để phù hợp với các ràng buộc hiện có. Theo mặc định, basicMarquee có một số cấu hình (chẳng hạn như tốc độ và độ trễ ban đầu) được đặt, nhưng bạn có thể sửa đổi các tham số này để tuỳ chỉnh hiệu ứng.

Đoạn mã sau đây triển khai hiệu ứng marquee cơ bản trên thành phần kết hợp 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

Hình 6. Đối tượng sửa đổi basicMarquee được áp dụng cho văn bản.

Tài nguyên khác

• Tìm hiểu về tính năng tô màu văn bản trong Compose
• Tạo ảnh động cho màu văn bản bằng bút vẽ trong Compose
• Hỗ trợ nhiều đường liên kết trong một chuỗi văn bản