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 là danh sách các thông 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.
Để biết tất cả tham số của Text
, hãy xem bài viết Soạn văn bản
mã nguồn.
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.
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) }
Thay đổi cỡ chữ
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
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) }
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) }
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 ) ) ) }
Thêm nhiều kiểu trong văn bản
Để đặt nhiều kiểu trong cùng một Text
hãy sử dụng AnnotatedString
là 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ủaSpanStyleRange
, 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ảnList
củaParagraphStyleRange
, 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
là để sử dụng
trong thành phần kết hợp Text
, trong khi SpanStyle
và ParagraphStyle
được 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 Thêm nhiều kiểu vào một đoạ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") } ) }
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 kỳ nơi 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 ) ) )
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, nhưng bạn có thể sử dụng bất kỳ bút vẽ tích hợp nào hoặc thậm chí chỉ là một SolidColor
để nâng cao văn bản của mình.
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
,
quá trình tích hợp với TextField
và buildAnnotatedString
trở nên 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 phần Nhập kiểu bằng Brush API.
Định kiểu bổ sung bằng SpanStyle
Áp dụng bút vẽ cho một span 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à độ dốc của lựa 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.") } )
Độ mờ trong một span văn bản
Để điều chỉnh độ mờ của một đoạn văn bản cụ thể, hãy dùng toán tử của SpanStyle
tham số alpha
không bắt buộc. 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, span văn bản đầu tiên hiển thị ở độ mờ một nửa (alpha =.5f
) trong khi span thứ hai hiển thị ở độ mờ đầy đủ (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 ❤️") } }
Tài nguyên khác
Để biết thêm các ví dụ về khả năng tuỳ chỉnh, hãy xem phần Chỉnh sửa cho văn bản trong Compose
Bài đăng trên blog về tô màu. 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 phần Tạo ảnh động cho màu văn bản bằng 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 ảnh động. Hiệu ứng marquee xảy ra nếu nội dung quá rộng không vừa với các giới hạn hiện có. 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 thông 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 ) } }
Hình 6. Đối tượng sửa đổi basicMarquee
được áp dụng cho văn bản.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Kiểu đoạn văn bản
- Material Design 2 trong Compose
- Đối tượng sửa đổi đồ hoạ