تقسيم ودمج المظهر في 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
    /* ... */
)

/* ... */

Theme system composition locals

يتم توفير فئات نظام المظهر بشكل ضمني لشجرة التركيب كمثيلات 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
    /* ... */
}