دکمه‌های نماد در Jetpack Compose Glimmer

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

در Jetpack Compose Glimmer، یک IconButton یک عنصر فشرده و تعاملی است که برای آشکار کردن کنش‌های تکمیلی با یک ضربه استفاده می‌شود.

دکمه‌های نماد کوچک‌تر از دکمه‌های استاندارد به‌نظر می‌رسند، اما مرز فیزیکی خود را حفظ می‌کنند تا تعامل با آن‌ها در عینک‌های نمایشگر آسان باشد.

برای موارد استفاده دیگر، دکمه‌های استاندارد و دکمه‌های تغییر وضعیت نیز وجود دارد.

نمونه‌ای از چند سبک مختلف دکمه‌های نماد در Jetpack Compose Glimmer. این مثال‌ها پنج وضعیت دکمه نماد را نشان می‌دهد: فعال (۱)، کانونی (۲)، فشرده (۳)، غیرفعال (۴)، غیرفعال و کانونی (۵).

اندازه‌ها و ابعاد

عنصر ابعاد

حداقل اندازه ظرف

۴۸ × ۴۸ پیکسل

اندازه نماد داخلی

۳۲ × ۳۲ پیکسل

حاشیه محتوای پیش‌فرض

GlimmerTheme.componentSpacingValues.small

ایالت‌ها

دکمه‌های نماد در Jetpack Compose Glimmer ظاهرشان را تغییر می‌دهند تا وضعیتشان را نشان دهند.

  • فعال: وضعیت تعاملی پیش‌فرض.
  • متمرکز: GlimmerTheme.depthEffectLevels.level1 و برجسته کردن حاشیه متمرکز را اعمال می‌کند.
  • فشار داده شد: یک رونهاد سفید نیمه‌شفاف روی سطح اعمال می‌کند.
  • غیرفعال: دکمه غیرتعاملی است و بازخورد دیداری برداشته می‌شود.

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

پیش‌فرض‌های زیر برای دکمه‌های نماد اعمال می‌شود:

  • شکل: به‌طور پیش‌فرض روی GlimmerTheme.shapes.large (معمولاً دایره‌ای) تنظیم می‌شود.
  • رنگ: به‌طور پیش‌فرض روی GlimmerTheme.colors.surface تنظیم می‌شود.
  • رنگ محتوا: به‌طور خودکار از رنگ پس‌زمینه محاسبه می‌شود، مگر اینکه به‌طور صریح ارائه شده باشد.
  • حاشیه محتوا: فاصله پیش‌فرض بین نماد و حاشیه ظرف را فراهم می‌کند.
  • حداقل اندازه: مقدار 48.dp ثابتی که از کوچک شدن بیش‌ازحد دکمه‌ها و تعامل با آن‌ها جلوگیری می‌کند.
  • اندازه نماد: به‌طور پیش‌فرض روی GlimmerTheme.iconSizes.small (32.dp) تنظیم می‌شود.

مثال: دکمه نماد

کد زیر دکمه نماد با ویژگی‌های پیش‌فرض ایجاد می‌کند:

@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* Handle action */ }) {
        Icon(FavoriteIcon, contentDescription = "Localized description")
    }
}