آناتومی یک تم در Compose

قالب‌ها در Jetpack Compose از تعدادی ساختار سطح پایین و APIهای مرتبط تشکیل شده‌اند. این موارد را می‌توان در کد منبع 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 = ""
    )
}

/* ... */

تابع تم

تابع theme نقطه ورود و API اصلی است. این تابع نمونه‌هایی از سیستم تم CompositionLocal را - با استفاده از مقادیر واقعی و هر منطق مورد نیاز - می‌سازد که با CompositionLocalProvider به درخت ترکیب ارائه می‌شوند. پارامتر content به composableهای تو در تو اجازه می‌دهد تا به مقادیر قالب‌بندی نسبت به سلسله مراتب دسترسی داشته باشند.

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

{% کلمه به کلمه %} {% فعل کمکی %} {% کلمه به کلمه %} {% فعل کمکی %}