Văn bản kiểu

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

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 phần về nhiều kiểu cùng dòng.

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

Các từ

Thay đổi cỡ chữ

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

Các từ

Làm cho văn bản in nghiêng

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

Các từ

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

Các từ

Thêm bóng

Tham 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 tham 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

Các từ

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

Để đặt các kiểu khác nhau trong cùng một thành phần kết hợp Text, hãy sử dụng AnnotatedString, một chuỗi có thể được chú thích bằng các kiểu chú thích 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 dùng trong thành phần kết hợp Text, trong khi SpanStyle và ParagraphStyle dùng để sử dụng trong AnnotatedString. Để biết thêm thông tin về nhiều kiểu trong một đoạn, hãy xem phần Thêm nhiều kiểu trong một đoạn.

AnnotatedString có trình tạo an toàn về kiểu để 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

Các từ

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

Để cho phép định 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 cứ 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.

Dùng bút vẽ để định 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

Sử dụng hàm "lineargradient" của API Bút vẽ với một danh sách màu xác định.
Hình 2. Sử dụng hàm linearGradient của API Bút vẽ 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 văn bản, nhưng hãy sử dụng bút vẽ tích hợp sẵn hoặc thậm chí chỉ là 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 sẽ 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 bài viết Nhập kiểu bằng API bút vẽ.

Định kiểu bổ sung bằng SpanStyle

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

Nếu bạn chỉ muốn áp dụng bút vẽ cho các phần văn bản, hãy sử dụng buildAnnotatedString và API SpanStyle, cùng với bút vẽ và độ chuyển màu 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

Sử dụng bút vẽ mặc định với kiểu tính năng tuyến tính cho Văn bản.
Hình 4. Sử dụng bút vẽ mặc định với linearGradient làm kiểu cho Text.
Độ mờ trong đoạn văn bản

Để điều chỉnh độ mờ của một khoảng văn bản cụ thể, hãy dùng tham số alpha không bắt buộc của SpanStyle. 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 span tương ứng. Trong mã mẫu, đoạn văn bản đầu tiên hiển thị ở độ mờ một nửa (alpha =.5f) trong khi đoạn 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

Sử dụng buildApprovaldString và tham số alpha của SpanStyle, cùng với lineargradient để thêm độ mờ cho một đoạn văn bản.
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.

Tài nguyên khác

Để biết thêm các ví dụ về cách tuỳ chỉnh, hãy xem bài đăng trên blog Brushing up on Compose Text Coloring (Tạo màu văn bản trong Compose). Nếu bạn muốn tìm hiểu thêm về cách Brush tích hợp với API Ảnh động, hãy xem bài viết Tạo ảnh động cho màu văn bản của bút vẽ trong Compose.

Á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 động. Hiệu ứng marquee xảy ra nếu nội dung quá rộng để vừa với các quy tắc ràng buộc có sẵn. Theo mặc định, basicMarquee có một số cấu hình nhất định (chẳng hạn như tốc độ và độ trễ ban đầu) được thiết lập, 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:

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

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