Trang này mô tả cách bạn có thể tạo kiểu cho văn bản
đoạn. Để thiết lập định kiểu ở cấp đoạn văn, bạn có thể định cấu hình các tham số như
textAlign
và lineHeight
hoặc xác định ParagraphStyle
của riêng bạn.
Đặt căn chỉnh văn bản
Tham số textAlign
cho phép bạn đặt giá trị nằm ngang
độ căn chỉnh của
văn bản trong khu vực bề mặt thành phần kết hợp Text
.
Theo mặc định, Text
sẽ chọn cách căn chỉnh văn bản tự nhiên tuỳ thuộc
vào giá trị nội dung nó:
- Cạnh trái của vùng chứa
Text
dành cho các bảng chữ cái từ trái sang phải, chẳng hạn như chữ La tinh, Cyrillic hoặc Hangul - Cạnh phải của vùng chứa
Text
dành cho các bảng chữ cái từ phải sang trái, chẳng hạn như chữ Ả Rập hoặc chữ Do Thái
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
Nếu bạn muốn thiết lập cách căn chỉnh văn bản của thành phần kết hợp Text
theo cách thủ công, hãy ưu tiên
sử dụng TextAlign.Start
và TextAlign.End
thay vì TextAlign.Left
và
TextAlign.Right
lần lượt, vì các giá trị này phân giải sang cạnh phải của Text
thành phần kết hợp tuỳ thuộc vào hướng văn bản của ngôn ngữ ưu tiên. Ví dụ: TextAlign.End
căn chỉnh ở bên phải cho văn bản tiếng Pháp và bên trái cho văn bản tiếng Ả Rập, nhưng TextAlign.Right
sẽ căn chỉnh bên phải cho dù bạn sử dụng bảng chữ cái nào.
Thêm nhiều kiểu trong một đoạn
Để thêm nhiều kiểu trong một đoạn, bạn có thể sử dụng ParagraphStyle
trong một
AnnotatedString
, có thể được chú thích bằng các kiểu chú thích tuỳ ý.
Sau khi một phần văn bản của bạn được đánh dấu bằng ParagraphStyle
, phần đó sẽ
được tách riêng khỏi văn bản còn lại như thể văn bản đó có nguồn cấp dữ liệu dòng ở đầu và
kết thúc.
Để biết thêm thông tin về cách thêm nhiều kiểu chữ trong một văn bản, hãy xem Thêm nhiều kiểu trong văn bản.
AnnotatedString
có một chế độ an toàn về kiểu
trình tạo
để tạo dễ dàng hơn: buildAnnotatedString
. Đoạn mã sau sử dụng
buildAnnotatedString
để đặt ParagraphStyle
:
@Composable fun ParagraphStyle() { Text( buildAnnotatedString { withStyle(style = ParagraphStyle(lineHeight = 30.sp)) { withStyle(style = SpanStyle(color = Color.Blue)) { append("Hello\n") } withStyle( style = SpanStyle( fontWeight = FontWeight.Bold, color = Color.Red ) ) { append("World\n") } append("Compose") } } ) }
Điều chỉnh chiều cao và khoảng đệm của dòng
includeFontPadding
là một thuộc tính cũ bổ sung thêm khoảng đệm dựa trên chỉ số phông chữ ở đầu dòng đầu tiên và cuối dòng cuối cùng của văn bản.
Bắt đầu từ Bảng kê khai thành phần của Compose phiên bản 2024.01.01
, includeFontPadding
đã được đặt
thành false
theo mặc định, giúp bố cục văn bản mặc định phù hợp hơn với
các công cụ thiết kế phổ biến.
Tính năng định cấu hình lineHeight
không còn mới – đã có kể từ Android Q. Bạn có thể định cấu hình lineHeight
cho Text
bằng cách sử dụng tham số lineHeight
. Tham số này sẽ phân bổ chiều cao dòng trong mỗi dòng văn bản. Sau đó, bạn có thể dùng LineHeightStyle API
mới để định cấu hình thêm cách căn chỉnh văn bản này trong khoảng trống và xoá khoảng trắng.
Bạn có thể cần điều chỉnh lineHeight
bằng cách sử dụng đơn vị văn bản "em" (kích thước phông chữ tương đối) thay vì "sp" (pixel theo tỷ lệ) để tăng độ chính xác. Để biết thêm thông tin về
chọn một đơn vị văn bản thích hợp, xem TextUnit
.
![Hình ảnh hiển thị lineHeight dưới dạng số đo dựa trên các dòng ngay phía trên và phía dưới.](https://developer.android.com/static/develop/ui/compose/images/text-lineheightv3.png?authuser=6&hl=vi)
lineHeight
đã đặt và cắt bớt khoảng trống nếu cần.
Text( text = text, style = LocalTextStyle.current.merge( TextStyle( lineHeight = 2.5.em, platformStyle = PlatformTextStyle( includeFontPadding = false ), lineHeightStyle = LineHeightStyle( alignment = LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None ) ) ) )
Ngoài việc điều chỉnh lineHeight
, giờ đây, bạn có thể căn giữa và tạo kiểu cho văn bản
sử dụng cấu hình với API thử nghiệm LineHeightStyle
: LineHeightStyle.Alignment
và LineHeightStyle.Trim
(includeFontPadding
phải được đặt thành false
cho
Cắt bớt để làm việc). Tính năng Căn chỉnh và Cắt bỏ sử dụng khoảng trống đo được giữa các dòng văn bản để phân bổ phù hợp hơn cho tất cả các dòng – bao gồm cả một dòng văn bản và dòng trên cùng của khối văn bản.
LineHeightStyle.Alignment
xác định cách căn chỉnh dòng trong khoảng trống được cung cấp theo chiều cao của dòng. Trong mỗi dòng, bạn có thể căn chỉnh để văn bản hiện trên cùng, dưới cùng, ở giữa hoặc theo tỷ lệ. Sau đó, LineHeightStyle.Trim
sẽ cho phép bạn để lại hoặc xoá khoảng trống thừa ở đầu dòng đầu tiên và cuối dòng cuối cùng của văn bản, được tạo từ bất kỳ thao tác điều chỉnh nào dùng lineHeight
và tính năng Căn chỉnh. Sau đây là các ví dụ minh hoạ văn bản nhiều dòng với các cấu hình LineHeightStyle.Trim
khác nhau khi căn chỉnh ở giữa (LineHeightStyle.Alignment.Center
).
![]() |
![]() |
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
![]() |
![]() |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
Xem bài đăng trên blog Khắc phục khoảng đệm phông chữ trong văn bản Compose để tìm hiểu
thêm thông tin về bối cảnh của thay đổi này, cách includeFontPadding
hoạt động trong Khung hiển thị
hệ thống và những thay đổi được thực hiện cho Compose và LineHeightStyle
mới
API.
Chèn ngắt dòng
API LineBreak
xác định tiêu chí phân chia văn bản
nhiều dòng. Bạn có thể chỉ định kiểu ngắt dòng bạn muốn trong
Khối TextStyle
của thành phần kết hợp Text
. Kiểu ngắt dòng đặt trước
bao gồm:
Simple
– Ngắt dòng nhanh, cơ bản. Nên dùng cho các trường nhập dữ liệu văn bản.Heading
– Lỗi ngắt dòng với các quy tắc ngắt dòng không chính xác. Đề xuất cho video ngắn văn bản, chẳng hạn như tiêu đề.Paragraph
– Ngắt dòng chậm hơn, chất lượng cao hơn để cải thiện khả năng đọc. Nên dùng cho số lượng văn bản lớn hơn, chẳng hạn như đoạn văn.
Đoạn mã sau sử dụng cả Simple
và Paragraph
để chỉ định
hành vi ngắt dòng trên một khối văn bản dài:
TextSample( samples = mapOf( "Simple" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Simple ) ) }, "Paragraph" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph ) ) } ) )
![Một khối văn bản thể hiện chiến lược ngắt dòng đơn giản so với văn bản
khối bằng chiến lược ngắt được tối ưu hóa cho đoạn. Khối văn bản với
chiến lược ngắt dòng có độ dài dòng thay đổi nhiều hơn.](https://developer.android.com/static/develop/ui/compose/images/text/simple-paragraph.png?authuser=6&hl=vi)
Trong kết quả ở trên, hãy lưu ý rằng hành vi ngắt dòng Paragraph
tạo ra
kết quả cân bằng hơn về mặt hình ảnh so với ngắt dòng Simple
.
Tuỳ chỉnh ngắt dòng
Bạn cũng có thể tạo cấu hình LineBreak
của riêng mình bằng Strategy
. Strategy
có thể là bất kỳ giá trị nào sau đây:
Balanced
— Cố gắng cân bằng độ dài dòng của văn bản, đồng thời áp dụng tự động gạch nối nếu được bật. Nên dùng cho màn hình nhỏ, chẳng hạn như đồng hồ, để tối đa hoá số lượng văn bản được hiển thị.HighQuality
— Tối ưu hoá đoạn để có văn bản dễ đọc hơn, bao gồm dấu gạch nối nếu được bật. (Nên là giá trị mặc định cho mọi trường hợp khôngBalanced
hoặcSimple
.)Simple
— chiến lược cơ bản, nhanh chóng. Nếu được bật, dấu gạch nối chỉ được thực hiện cho mà không phù hợp với toàn bộ dòng. Hữu ích khi chỉnh sửa văn bản để tránh thay đổi vị trí trong khi nhập.
Đoạn mã sau đây chỉ ra sự khác biệt giữa một đoạn văn có chế độ cài đặt mặc định
và một đoạn được tối ưu hoá cho màn hình nhỏ với dấu ngắt dòng Balanced
chiến lược:
TextSample( samples = mapOf( "Balanced" to { val smallScreenAdaptedParagraph = LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced) Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = smallScreenAdaptedParagraph ) ) }, "Default" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default ) } ) )
![Một đoạn có chiến lược ngắt dòng cân bằng và một đoạn
được định dạng mà không có chiến lược. Đoạn có dấu ngắt dòng cân bằng
có độ dài dòng nhất quán hơn so với mặc định.](https://developer.android.com/static/develop/ui/compose/images/text/balanced-default.png?authuser=6&hl=vi)
Balanced
(trên cùng) so với một đoạn văn được định dạng mà không có chiến lược ngắt dòng.Những điều cần cân nhắc về CJK
Bạn cũng có thể tuỳ chỉnh LineBreak
bằng Strictness
và
Các API WordBreak
, được thiết kế riêng cho ngôn ngữ CJK.
Không phải lúc nào bạn cũng có thể thấy hiệu ứng của các API này bằng các ngôn ngữ không phải CJK. Nhìn chung,
quy tắc ngắt dòng được xác định dựa trên ngôn ngữ.
Strictness
mô tả độ nghiêm ngặt của việc ngắt dòng bằng
thuộc tính:
Default
– Quy tắc phá vỡ mặc định cho ngôn ngữ. Có thể tương ứng vớiNormal
hoặcStrict
.Loose
— Các quy tắc ít hạn chế nhất. Phù hợp với dòng ngắn.Normal
– Những quy tắc phổ biến nhất để ngắt dòng.Strict
— Các quy tắc nghiêm ngặt nhất để ngắt dòng.
WordBreak
xác định cách chèn ngắt dòng trong từ bằng hàm
các thuộc tính sau:
Default
– Quy tắc phá vỡ mặc định cho ngôn ngữ.Phrase
— Ngắt dòng dựa trên các cụm từ.
Đoạn mã sau sử dụng độ nghiêm ngặt Strict
và dấu ngắt từ Phrase
cài đặt cho văn bản tiếng Nhật:
val customTitleLineBreak = LineBreak( strategy = LineBreak.Strategy.HighQuality, strictness = LineBreak.Strictness.Strict, wordBreak = LineBreak.WordBreak.Phrase ) Text( text = "あなたに寄り添う最先端のテクノロジー。", modifier = Modifier.width(250.dp), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = customTitleLineBreak ) )
![Văn bản tiếng Nhật có các chế độ cài đặt Độ nghiêm ngặt và Ngắt từ so với văn bản mặc định.](https://developer.android.com/static/develop/ui/compose/images/text/cjk-line-break.png?authuser=6&hl=vi)
Strictness
và WordBreak
(trên cùng)
so với văn bản chỉ được định dạng bằng LineBreak.Heading
(dưới cùng).Dấu gạch nối văn bản được tách thành các dòng
API Hyphens
cho phép bạn thêm tính năng hỗ trợ dấu gạch nối vào ứng dụng.
Dấu gạch nối đề cập đến việc chèn một dấu câu giống như dấu gạch ngang để cho biết rằng
từ được chia trên các dòng văn bản. Khi được bật, dấu gạch nối sẽ được thêm giữa
âm tiết của một từ ở các dấu gạch nối thích hợp.
Theo mặc định, tính năng gạch nối không được bật. Để bật tính năng gạch nối, hãy thêm
Hyphens.Auto
dưới dạng tham số trong khối TextStyle
:
TextSample( samples = mapOf( "Hyphens - None" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.None ) ) }, "Hyphens - Auto" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.Auto ) ) } ) )
![Một đoạn không có dấu gạch nối được bật và một đoạn được bật dấu gạch nối.
Khi bạn bật tính năng gạch nối, một từ sẽ được gạch nối và được chia thành 2 dòng.](https://developer.android.com/static/develop/ui/compose/images/text/hyphens.png?authuser=6&hl=vi)
Khi được bật, dấu gạch nối chỉ xảy ra trong các điều kiện sau:
- Từ không vừa với dòng. Nếu bạn dùng chiến lược ngắt dòng
Simple
, dấu gạch nối của một từ chỉ xảy ra nếu một dòng ngắn hơn một dòng . - Ngôn ngữ thích hợp được thiết lập trên thiết bị của bạn, vì dấu gạch nối thích hợp là được xác định bằng từ điển có trên hệ thống.
Đề 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 văn bản
- Kiến thức cơ bản về bố cục Compose
- Phép đo nội tại trong bố cục Compose