تتألف المظاهر في Jetpack Compose من عدد من التركيبات ذات المستوى الأدنى وواجهات برمجة التطبيقات ذات الصلة. يمكن الاطّلاع عليها في رمز المصدر في MaterialTheme
ويمكن تطبيقها أيضًا في أنظمة التصميم المخصّصة.
صفوف نظام المظاهر
يتكون الموضوع عادةً من عدد من الأنظمة التي تجمع المفاهيم المرئية والسلوكية الشائعة. يمكن نمذجة هذه الأنظمة باستخدام فئات لها قيم موضوعية.
على سبيل المثال، تتضمن السمة MaterialTheme
Colors
(نظام الألوان)
وTypography
(نظام الطباعة)
وShapes
(نظام الشكل).
@Immutable data class ColorSystem( val color: Color, val gradient: List<Color> /* ... */ ) @Immutable data class TypographySystem( val fontFamily: FontFamily, val textStyle: TextStyle ) /* ... */ @Immutable data class CustomSystem( val value1: Int, val value2: String /* ... */ ) /* ... */
المحتوى المحلي لتركيب نظام المظهر
يتم توفير فئات نظام المظاهر بشكل ضمني في شجرة المقطوعات الموسيقية كمثيلات
CompositionLocal
. يسمح هذا بالرجوع إلى قيم المواضيع بشكل ثابت في دوال قابلة للتعديل.
للمزيد من المعلومات حول "CompositionLocal
"، يمكنك الاطّلاع على
البيانات ذات النطاق المحلي باستخدام دليل IndustryLocal.
val LocalColorSystem = staticCompositionLocalOf { ColorSystem( color = Color.Unspecified, gradient = emptyList() ) } val LocalTypographySystem = staticCompositionLocalOf { TypographySystem( fontFamily = FontFamily.Default, textStyle = TextStyle.Default ) } val LocalCustomSystem = staticCompositionLocalOf { CustomSystem( value1 = 0, value2 = "" ) } /* ... */
دالة المظهر
دالة المظهر هي نقطة الدخول وواجهة برمجة التطبيقات الأساسية. تنشئ هذه السمة مثيلات
لأنظمة المظاهر CompositionLocal
التي يتم توفيرها باستخدام قيم حقيقية أي منطق مطلوب،
ويتم توفيرها في شجرة المقطوعات الموسيقية باستخدام CompositionLocalProvider
.
تسمح المعلَمة content
للعناصر المدمجة بالوصول إلى القيم الموضوعة المتعلقة بالتسلسل الهرمي.
@Composable fun Theme( /* ... */ content: @Composable () -> Unit ) { val colorSystem = ColorSystem( color = Color(0xFF3DDC84), gradient = listOf(Color.White, Color(0xFFD7EFFF)) ) val typographySystem = TypographySystem( fontFamily = FontFamily.Monospace, textStyle = TextStyle(fontSize = 18.sp) ) val customSystem = CustomSystem( value1 = 1000, value2 = "Custom system" ) /* ... */ CompositionLocalProvider( LocalColorSystem provides colorSystem, LocalTypographySystem provides typographySystem, LocalCustomSystem provides customSystem, /* ... */ content = content ) }
كائن المظهر
يتم الوصول إلى أنظمة المظاهر من خلال كائن ذي خصائص ملائمة. للتناسق، يميل الكائن إلى تسمية الكائن بنفس اسم دالة المظهر. تحصل الخصائص ببساطة على التركيبة المحلية الحالية.
// Use with eg. Theme.colorSystem.color object Theme { val colorSystem: ColorSystem @Composable get() = LocalColorSystem.current val typographySystem: TypographySystem @Composable get() = LocalTypographySystem.current val customSystem: CustomSystem @Composable get() = LocalCustomSystem.current /* ... */ }
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
- البيانات ذات النطاق المحلي باستخدام تعاون محلي
- أنظمة التصميم المخصّصة في Compose
- Material Design 2 في Compose