متن در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا
این راهنما به شما کمک می‌کند تا برای این نوع دستگاه‌های XR تجربه ایجاد کنید.
عینک نمایش

در Jetpack Compose Glimmer، کامپوننت Text به شما امکان می‌دهد ویژگی‌های مختلف متن مانند رنگ، اندازه فونت، سبک فونت، ضخامت فونت، خانواده فونت، فاصله حروف و ترازبندی متن را تنظیم کنید.

افزونه‌ی Jetpack Compose Glimmer Text منحصر به فرد است زیرا به طور هوشمندانه تطبیق رنگ را مدیریت می‌کند. برای مثال، اگر هیچ تغییر رنگی مشخص نشده باشد، متن به طور پیش‌فرض به رنگ محتوایی که توسط نزدیکترین سطحی که روی آن قرار دارد ارائه می‌شود، تنظیم می‌شود.

مثال: ایجاد یک عنوان متنی در یک کادر

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

نکات کلیدی در مورد کد

  • از آنجا که هیچ رنگی مشخص نشده است، این متن به نزدیکترین سطح نگاه می‌کند تا بهترین رنگ قابل خواندن (معمولاً سفید) را انتخاب کند.

اندازه

مقیاس تایپوگرافی در Jetpack Compose Glimmer به طور قابل توجهی بزرگتر از طراحی استاندارد متریال موبایل است. استایل‌هایی مانند TitleLarge و BodyLarge هر دو 30.sp و Caption 18.sp هستند:

سبک اندازه (sp) وزن ارتفاع خط

عنوانبزرگ

۳۰

۷۵۰

۳۶.اس پی

عنوانمتوسط

۲۴

۷۵۰

۲۸.اس پی

عنوانکوچک

۲۰

۷۵۰

۲۸.اس پی

بدنبزرگ

۳۰

۵۲۰

۳۶.اس پی

بدن متوسط

۲۴

۵۲۰

۳۶.اس پی

بدنکوچک

۲۰

۵۲۰

۲۸.اس پی

عنوان

۱۸

۶۵۰

۲۴.اس‌پی

از گوگل سنس فلکس استفاده کنید

گوگل سنس فلکس یک فونت متغیر است که به طور خاص برای عینک‌های هوش مصنوعی انتخاب شده و به عنوان بخشی از Jetpack Compose Glimmer ارائه می‌شود. گوشه‌های گرد و محورهای قابل تنظیم این فونت، اندازه نوری ایده‌آل را فراهم می‌کنند و تضمین می‌کنند که متن قابل مشاهده و خوانا باقی بماند. در صورت امکان، برای بهبود هماهنگی بین برنامه و سیستم برای کاربران، از گوگل سنس فلکس برای تمام متن‌های نمایش داده شده روی عینک‌های نمایش استفاده کنید.

برای استفاده از Google Sans Flex، کتابخانه glimmer-google-fonts را به وابستگی‌های برنامه خود اضافه کنید ، سپس فونت را به صورت سراسری به GlimmerTheme اعمال کنید:

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