ใน Jetpack Compose Glimmer คอมโพเนนต์ Text ช่วยให้คุณตั้งค่าพร็อพเพอร์ตี้ข้อความต่างๆ เช่น สี ขนาดแบบอักษร รูปแบบแบบอักษร ความหนาแบบอักษร ตระกูลแบบอักษร ระยะห่างตัวอักษร และการจัดข้อความ
ข้อความเรืองแสงของ Jetpack Compose มีเอกลักษณ์เฉพาะตัวเนื่องจากจัดการการจับคู่สีได้อย่างชาญฉลาด เช่น หากไม่ได้ระบุการลบล้างสี ข้อความจะใช้สีเริ่มต้นเป็น สีเนื้อหาที่มาจากพื้นผิวที่ใกล้ที่สุดซึ่งข้อความนั้นอยู่
ตัวอย่าง: สร้างหัวเรื่องข้อความในกรอบ
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
ประเด็นสำคัญเกี่ยวกับโค้ด
- เนื่องจากไม่ได้ระบุสี ข้อความนี้จึงมองหาพื้นผิวที่ใกล้ที่สุดเพื่อเลือกสีที่อ่านได้ดีที่สุด (โดยปกติคือสีขาว)
การกำหนดขนาด
ขนาดการออกแบบตัวอักษรใน Jetpack Compose Glimmer มีขนาดใหญ่กว่า Material Design มาตรฐานบนอุปกรณ์เคลื่อนที่อย่างมาก รูปแบบอย่าง TitleLarge และ BodyLarge เป็น30.spทั้งคู่ และคำบรรยายแทนเสียงคือ 18.sp
| รูปแบบ | ขนาด (sp) | น้ำหนัก | ความสูงของบรรทัด |
|---|---|---|---|
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 |
คำบรรยาย |
18 |
650 |
24.sp |
ใช้ Google Sans Flex
Google Sans Flex เป็นแบบอักษรแบบตัวแปรที่เลือกมาโดยเฉพาะสำหรับแว่นตา AI ซึ่งมีให้เป็นส่วนหนึ่งของ Jetpack Compose Glimmer มุมโค้งและแกนที่ปรับได้ของแบบอักษรช่วยให้ปรับขนาดแบบอักษรให้เหมาะสมที่สุดได้ เพื่อให้มั่นใจว่าข้อความยังคงอ่านง่ายและอ่านได้อย่างรวดเร็ว หากเป็นไปได้ ให้ใช้ Google Sans Flex สำหรับข้อความทั้งหมดที่แสดงบนแว่นตาแสดงผล เพื่อปรับปรุงความสอดคล้องกัน สำหรับผู้ใช้ระหว่างแอปกับระบบ
หากต้องการใช้ Google Sans Flex ให้เพิ่มไลบรารี glimmer-google-fonts ลงใน
ทรัพยากร Dependency ของแอป แล้วใช้แบบอักษรกับ GlimmerTheme ทั่วโลก
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }