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

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

صفوف نظام المظاهر

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

على سبيل المثال، تتضمن السمة MaterialTheme Colors (نظام الألوان) وTypography (نظام الطباعة) وShapes (نظام الشكل).

ملاحظة: يجب إضافة تعليقات توضيحية إلى الصفوف باستخدام Stable أو @Immutable لتقديم معلومات إلى برنامج التجميع في Compose. لمزيد من المعلومات، اطّلِع على دليل دورة حياة المواد الإبداعية.

@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
    /* ... */
)

/* ... */
ThemeAnatomySnippets.kt

المحتوى المحلي لتركيب نظام المظهر

يتم توفير فئات نظام المظاهر بشكل ضمني في شجرة المقطوعات الموسيقية كمثيلات CompositionLocal. يسمح هذا بالرجوع إلى قيم المواضيع بشكل ثابت في دوال قابلة للتعديل.

للمزيد من المعلومات حول "CompositionLocal"، يمكنك الاطّلاع على البيانات ذات النطاق المحلي باستخدام دليل IndustryLocal.

ملاحظة: يمكنك إنشاء CompositionLocal للصف باستخدام compositionLocalOf أو staticCompositionLocalOf. تتضمّن هذه الدوال دالة lambda لاحقة واحدة (defaultFactory) لتوفير قيم احتياطية من النوع نفسه الذي توفّره هذه الدوال. من المفيد استخدام إعدادات تلقائية معقولة، مثل Color.Unspecified وTextStyle.Default وما إلى ذلك.

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

/* ... */
ThemeAnatomySnippets.kt

دالة المظهر

دالة المظهر هي نقطة الدخول وواجهة برمجة التطبيقات الأساسية. تنشئ هذه السمة مثيلات لأنظمة المظاهر 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
    )
}
ThemeAnatomySnippets.kt

كائن المظهر

يتم الوصول إلى أنظمة المظاهر من خلال كائن ذي خصائص ملائمة. للتناسق، يميل الكائن إلى تسمية الكائن بنفس اسم دالة المظهر. تحصل الخصائص ببساطة على التركيبة المحلية الحالية.

// 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
    /* ... */
}
ThemeAnatomySnippets.kt