سبک‌ها در Compose

Style API الگوی جدیدی برای سفارشی‌سازی یا «سبک‌دهی» به عناصر و مؤلفه‌ها در Jetpack Compose است که به‌طور سنتی ازطریق اصلاح‌کننده‌ها انجام می‌شده است. این عامل برای باز کردن قفل سفارشی‌سازی عمیق‌تر و آسان‌تر طراحی شده است.

Styles API انعطاف‌پذیری را در ضریب‌های شکل بهبود می‌بخشد، عملکرد بهتری ارائه می‌دهد، و ایجاد سیستم طراحی سفارشی را آسان‌تر می‌کند. حتی اگر به مؤلفه‌های سفارشی نیاز نداشته باشید، Styles API مزایای زیادی برای سیستم طراحی شما دارد.

یک تفاوت مهم این است که «سبک‌ها» جایگزین اصلاح‌کننده‌ها نیستند، اما به‌عنوان جایگزینی برای پارامترهای سبک‌بندی، مانند حاشیه داخلی و رنگ‌ها، عمل می‌کنند. توصیه می‌کنیم برای افزایش انعطاف‌پذیری و عملکرد، به‌جای پارامترها از «سبک‌ها» استفاده کنید.

مزایای «سبک‌ها»

  • ساده‌سازی سبک‌بندی مبتنی بر وضعیت: این میانای برنامه‌سازی کاربردی روشی مختصرتر و توضیحی‌تر برای تعریف سبک‌هایی ارائه می‌دهد که براساس وضعیت‌های مختلف تغییر می‌کنند (مثلاً، نگه داشتن نشانگر، متمرکز، فشرده‌شده)، که درمقایسه با سیستم اصلاح‌کننده، کد استاندارد را به‌طور قابل‌توجهی کاهش می‌دهد.
  • بهبود انتقال‌های حالت پویانمایی‌شده: Style API امکان پویانمایی توکار ویژگی‌های سبک را بین حالت‌ها با مشخصه‌های عملکرد ایده‌آل فراهم می‌کند و از بازترکیب‌هایی که با رویکرد فعلی animateColorAsState رخ می‌دهد جلوگیری می‌کند.
  • ساده‌سازی میاناهای برنامه‌سازی کاربردی مؤلفه: با معرفی یک پارامتر «سبک» برای سفارشی‌سازی، میاناهای برنامه‌سازی کاربردی مؤلفه به‌طور چشمگیری ساده شده‌اند و انعطاف‌پذیری بیشتری ارائه می‌دهند.
  • ترکیب‌بندی‌های مجدد کمتر که منجر به عملکرد بهتر نسبت‌به اصلاح‌کننده‌ها می‌شود: سبک‌ها در فازهای Draw و Layout از Compose اجرا می‌شوند و فاز Composition را نادیده می‌گیرند.
  • مجموعه استانداردتری از API: مجموعه استانداردی از ویژگی‌های سبک‌شناختی هر مؤلفه‌ای را قابل‌سبک‌بندی می‌کند.

مفاهیم اصلی

مفهوم شرح
Style میانایی که ظاهر عنصر میانای کاربر را با مجموعه‌ای استاندارد از ویژگی‌های قابل‌سبک‌بندی تعریف می‌کند. این ویژگی شبیه به سبک‌های CSS است و می‌توان آن را به‌صورت محلی یا ازطریق یک زمینه سفارشی‌سازی کرد. سبک‌ها روی یکدیگر بازنویسی می‌شوند؛ تنظیم کردن یک ویژگی برای دو بار (مثلاً background()) منجر به یک مقدار نهایی واحد می‌شود.
StyleScope یک دامنه گیرنده برای تابع applyStyle() در یک Style. این مؤلفه توابعی برای تعریف ویژگی‌های دیداری (حاشیه داخلی، پس‌زمینه، حاشیه، و غیره) و دسترسی به StyleState فعلی ارائه می‌دهد.
StyleState وضعیت (مثلاً isEnabled،‏ isPressed،‏ isChecked، وضعیت‌های سفارشی) را ارائه می‌دهد که می‌توانید از آن در «سبک» برای تعریف کردن سبک‌بندی شرطی استفاده کنید.

شروع به کار: افزودن وابستگی‌ها

برای استفاده از میاناهای برنامه‌سازی کاربردی در پروژه خودتان، مطمئن شوید که از جدیدترین نسخه آلفای Jetpack Compose foundation استفاده می‌کنید. در فایل settings.gradle.kts، مخزن maven عکس آنی را به فهرست مخزن‌ها برای استفاده اضافه کنید.

در libs.versions.toml یا مستقیماً در فایل app/build.gradle.kts، نسخه Compose را روی 1.12.0-alpha03 تنظیم کنید:

compose = "1.12.0-alpha03"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }