تقسيم ودمج المظهر في Compose

تتألف السمات في Jetpack Compose من عدد من البُنى ذات المستوى الأدنى وواجهات برمجة التطبيقات ذات الصلة. ويمكن الاطّلاع عليها في رمز المصدر لـ MaterialTheme، ويمكن أيضًا تطبيقها في أنظمة التصميم المخصّصة.

فئات نظام المظاهر

يتألف المظهر عادةً من عدد من الأنظمة الفرعية التي تجمع بين المفاهيم المرئية والسلوكية الشائعة. يمكن تصميم هذه الأنظمة باستخدام فئات تتضمّن قيمًا خاصة بالمظهر.

على سبيل المثال، يتضمّن MaterialTheme ما يلي: ColorScheme (نظام الألوان) 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، يمكنك الاطّلاع على دليل البيانات ذات النطاق المحلي باستخدام CompositionLocal.

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 = ""
    )
}

/* ... */

دالة المظهر

دالة السمة هي نقطة الدخول وواجهة برمجة التطبيقات الأساسية. تنشئ هذه الدالة مثيلات لنظام السمات CompositionLocals باستخدام القيم الحقيقية وأي منطق مطلوب، ويتم توفيرها لشجرة التركيب باستخدام 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
    /* ... */
}