الأنماط في ميزة "إنشاء"

‫Style API هو نموذج جديد لتخصيص العناصر والمكوّنات أو "تصميمها" في Jetpack Compose، وهو ما كان يتم تقليديًا من خلال المعدِّلات. وهو مصمَّم لتوفير تخصيص أسهل وأكثر تفصيلاً.

يحسّن Styles API المرونة على مستوى عوامل شكل الأجهزة، ويوفّر أداءً أفضل، ويتيح إنشاء أنظمة تصميم مخصّصة بسهولة أكبر. حتى إذا لم تكن بحاجة إلى مكوّنات مخصّصة، فإنّ Styles API يقدّم العديد من المزايا لنظام التصميم.

من المهم التمييز بين الأنماط والمعدِّلات، فالأنماط ليست بديلاً عن المعدِّلات، ولكنّها تحل محلّ مَعلمات التصميم، مثل المساحة الداخلية والألوان. ننصحك بالانتقال إلى استخدام الأنماط بدلاً من المَعلمات لزيادة المرونة والأداء.

مزايا الأنماط

  • تبسيط التصميم المستند إلى الحالة: توفّر واجهة برمجة التطبيقات طريقة أكثر إيجازًا وتصريحًا لتحديد الأنماط التي تتغيّر استنادًا إلى حالات مختلفة (مثل التمرير فوق العنصر أو التركيز عليه أو الضغط عليه)، ما يقلّل بشكل كبير من رمز النص النموذجي مقارنةً بنظام المعدِّلات.
  • تحسين عمليات الانتقال بين الحالات المتحرّكة: تتيح Style API إمكانية إضافة حركة تلقائية لخصائص النمط بين الحالات مع خصائص الأداء المثالية، ما يتجنّب عمليات إعادة التركيب التي تحدث مع طريقة animateColorAsState الحالية.
  • تبسيط واجهات برمجة التطبيقات للمكوّنات: من خلال تقديم مَعلمة نمط واحدة للتخصيص، يتم تبسيط واجهات برمجة التطبيقات للمكوّنات بشكل كبير وتوفّر مرونة أكبر.
  • عدد أقل من عمليات إعادة التركيب ما يؤدي إلى أداء أفضل من المعدِّلات: يتم تشغيل الأنماط في مرحلتَي الرسم والتنسيق في Compose، مع تخطّي مرحلة التركيب.
  • مجموعة أكثر توحيدًا من واجهات برمجة التطبيقات: تجعل مجموعة موحّدة من الخصائص الأسلوبية أي مكوّن قابلاً للتصميم.

المفاهيم الأساسية

مفهوم الوصف
Style واجهة تحدّد مظهر عنصر واجهة مستخدم، مع مجموعة عادية من الخصائص القابلة للتصميم. وهي مشابهة لأنماط CSS ويمكن تخصيصها محليًا أو من خلال مظهر. تستبدل الأنماط بعضها البعض، وإذا تم ضبط إحدى الخصائص مرّتين (مثل background())، ستكون هناك قيمة نهائية واحدة.
StyleScope نطاق جهاز استقبال للدالة applyStyle() ضِمن نمط. يوفّر هذا النطاق دوالاً لتحديد الخصائص المرئية (المساحة الداخلية والخلفية والحدود وما إلى ذلك) والوصول إلى 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" }
التالي
أساسيات الأنماط