Trong Jetpack Compose Glimmer, thành phần Text cho phép bạn đặt nhiều thuộc tính văn bản như màu sắc, kích thước phông chữ, kiểu phông chữ, độ đậm của phông chữ, bộ phông chữ, khoảng cách giữa các chữ cái và chế độ căn chỉnh văn bản.
Văn bản lấp lánh của Jetpack Compose là duy nhất vì có thể quản lý thông minh việc so khớp màu. Ví dụ: nếu bạn không chỉ định chế độ ghi đè màu, thì văn bản sẽ mặc định là màu nội dung do bề mặt gần nhất mà văn bản nằm trên cung cấp.
Ví dụ: Tạo tiêu đề dạng văn bản trong một hộp
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Các điểm chính về mã
- Vì không có màu nào được chỉ định, văn bản này sẽ xem xét vùng hiển thị gần nhất để chọn màu dễ đọc nhất (thường là màu trắng).
Định cỡ
Thang kiểu chữ trong Jetpack Compose Glimmer lớn hơn đáng kể so với Material Design tiêu chuẩn trên thiết bị di động. Các kiểu như TitleLarge và BodyLarge đều là 30.sp, còn Phụ đề là 18.sp:
| Kiểu | Kích thước (sp) | Trọng lượng | Chiều cao dòng |
|---|---|---|---|
titleLarge |
30 |
750 |
36.sp |
titleMedium |
24 |
750 |
28.sp |
titleSmall |
20 |
750 |
28.sp |
bodyLarge |
30 |
520 |
36.sp |
bodyMedium |
24 |
520 |
36.sp |
bodySmall |
20 |
520 |
28.sp |
chú thích |
18 |
lira Thổ Nhĩ Kỳ |
24.sp |
Sử dụng Google Sans Flex
Google Sans Flex là một phông chữ có thể thay đổi được chọn riêng cho kính AI và được cung cấp trong Glimmer của Jetpack Compose. Các góc bo tròn và trục có thể điều chỉnh của phông chữ cho phép điều chỉnh kích thước quang học lý tưởng, đảm bảo văn bản vẫn dễ đọc và dễ xem nhanh. Nếu có thể, để cải thiện tính nhất quán cho người dùng giữa ứng dụng và hệ thống, hãy sử dụng Google Sans Flex cho tất cả văn bản hiển thị trên kính hiển thị.
Để sử dụng Google Sans Flex, hãy thêm thư viện glimmer-google-fonts vàocác phần phụ thuộc của ứng dụng, sau đó áp dụng phông chữ trên toàn cục cho GlimmerTheme:
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }