ข้อความใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ
คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่อไปนี้
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →
แว่นตาแสดงผล
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน Jetpack Compose Glimmer คอมโพเนนต์ Text ช่วยให้คุณตั้งค่าพร็อพเพอร์ตี้ข้อความต่างๆ ได้ เช่น สี ขนาดแบบอักษร รูปแบบแบบอักษร ความหนาของแบบอักษร ชุดแบบอักษร ระยะห่างระหว่างตัวอักษร และการจัดข้อความ

ข้อความ Jetpack Compose Glimmer มีความโดดเด่นเนื่องจากจัดการการจับคู่สีได้อย่างชาญฉลาด เช่น หากไม่ได้ระบุการลบล้างสี ข้อความจะใช้สีเนื้อหาเริ่มต้นที่มาจากพื้นผิวที่ใกล้ที่สุด

ตัวอย่าง: สร้างหัวข้อข้อความในกล่อง

@Composable
fun TextSample() {
    Text(
        text = "Hello Glimmer",
        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)
    }
}