نمادها در Jetpack Compose Glimmer

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

در Jetpack Compose Glimmer، عنصر Icon یک عنصر میانای کاربر برای پرداز کردن نمادهای تک‌رنگ است. نمادها به‌طور هوشمندانه رنگ‌آمیزی و مقیاس‌بندی را مدیریت می‌کنند تا خوانا باقی بمانند و ازنظر بصری با GlimmerTheme هماهنگ باشند.

اندازه

اگرچه نمادها به‌طور پیش‌فرض به اندازه ارائه‌شده توسط LocalIconSize تنظیم می‌شوند، می‌توانید از سه اندازه نماد ارائه‌شده برای تنظیم اندازه خاصی استفاده کنید. این اندازه‌ها به‌طور پیش‌فرض برای زمینه‌های زیر نیز استفاده می‌شوند:

کد اندازه کاربرد پیش‌فرض

small

برای عناصر فهرست استاندارد یا تراشه‌های کوچک.

medium

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

large

برای عناصر با تأکید زیاد مثل کارت‌ها.

منابع نماد

نمادها می‌توانند ImageVector، ImageBitmap، یا Painter را به‌عنوان منبع خود بپذیرند. هنگام تعریف کردن نمادهای خودتان، درصورت امکان از ImageVector استفاده کنید تا در هر مقیاسی در عینک‌های نمایشگر، رندرینگ واضحی داشته باشید.

رنگ و سایه‌رنگ

  • رنگ خودکار: نماد رنگ خود را براساس LocalContentColor ارائه‌شده توسط سطح والد LocalContentColor ارائه‌شده توسط سطح والد، مانند surface یا Button، تعیین می‌کند.
  • رنگ‌آمیزی دستی: از پارامتر tint برای اعمال یک رنگ خاص استفاده کنید.
  • دارایی‌های چندرنگ: برای نمادهایی که نباید رنگی شوند (مثل نشان‌واره‌های نمانام چندرنگ)، tint = Color.Unspecified را تنظیم کنید.
  • تصاویر عمومی: برای عکس‌ها یا تصاویر عمومی که از قوانین اندازه و رنگ‌آمیزی نماد پیروی نمی‌کنند، به‌جای آن از androidx.compose.foundation.Image استاندارد استفاده کنید.

مثال: نماد پایه

کد زیر نماد پایه‌ای را ایجاد می‌کند:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

مثال: نمادهای رنگی

کد زیر بااستفاده از رنگ اصلی زمینه، نماد رنگی ایجاد می‌کند:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

مثال: نمادهایی با اندازه‌های مختلف

کد زیر نمادی را ایجاد می‌کند که برای داشتن اندازه مشخصی اصلاح شده است:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

نکات کلیدی درباره کد

  • اندازه نماد بااستفاده از GlimmerTheme.iconSizes با اصلاح‌کننده سفارشی‌سازی شده است. برای نمادها، مقدار پیش‌فرض GlimmerTheme.iconSizes.medium است. برای حفظ یکپارچگی در سراسر رابط کاربری، به‌جای مقادیر کدبندی سخت از این اندازه‌ها استفاده کنید.
  • contentDescription بومی‌سازی‌شده‌ای برای نماد ارائه می‌دهد. همیشه این شرح‌ها را ارائه دهید، مگر اینکه نماد صرفاً تزئینی باشد.