النص في Glimmer من Jetpack Compose

أجهزة XR المشمولة
تساعدك هذه الإرشادات في إنشاء تجارب لهذه الأنواع من أجهزة XR.
مزيد من المعلومات حول أنواع أجهزة XR →
نظّارة ذكية
مزيد من المعلومات حول أنواع أجهزة XR →

في Jetpack Compose Glimmer، يتيح لك المكوّن Text ضبط خصائص مختلفة للنص، مثل اللون وحجم الخط ونمطه ووزنه وعائلته والمسافة بين الأحرف ومحاذاة النص.

إنّ ميزة "النص المتلألئ" في Jetpack Compose فريدة من نوعها لأنّها تدير مطابقة الألوان بذكاء. على سبيل المثال، إذا لم يتم تحديد أي لون بديل، سيتم تلقائيًا ضبط لون النص على لون المحتوى الذي توفّره أقرب مساحة يظهر عليها النص.

مثال: إنشاء عنوان نصي في مربّع

@Composable
fun TextSample() {
      Text(
      text = "This is a sample heading",
      style = GlimmerTheme.typography.titleLarge )
}

النقاط الرئيسية حول الرمز

  • بما أنّه لم يتم تحديد أي لون، يبحث هذا النص عن أقرب سطح لاختيار أفضل لون قابل للقراءة (عادةً ما يكون أبيض).

مقاسات الشعار

مقياس أسلوب الخط في Glimmer من Jetpack Compose أكبر بكثير من مقياس أسلوب الخط العادي في التصميم المتعدد الأبعاد على الأجهزة الجوّالة. الأنماط مثل 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 هو خط متغير تم اختياره خصيصًا لنظارات الذكاء الاصطناعي، ويتم توفيره كجزء من Jetpack Compose Glimmer. تتيح الزوايا الدائرية والمحاور القابلة للتعديل في الخط تحديد الحجم البصري المثالي، ما يضمن أن يظل النص قابلاً للقراءة بسرعة وواضحًا. لتحسين اتساق تجربة المستخدمين بين تطبيقك والنظام، استخدِم خط Google Sans Flex لجميع النصوص المعروضة على النظارات الذكية.

لاستخدام Google Sans Flex، أضِف مكتبة glimmer-google-fonts إلى التبعيات في تطبيقك، ثم طبِّق الخط على مستوى العالم على GlimmerTheme:

@Composable
fun GoogleSansFlexTypographySample() {
    val typography = createGoogleSansFlexTypography()
    GlimmerTheme(typography = typography) {
        Text("Hello World", style = GlimmerTheme.typography.titleLarge)
    }
}