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

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

/* ... */
ThemeAnatomySnippets.kt

افراد محلی ترکیب سیستم تم

کلاس های سیستم تم به طور ضمنی به درخت ترکیب به عنوان نمونه های 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 = ""
    )
}

/* ... */
ThemeAnatomySnippets.kt

تابع تم

تابع تم نقطه ورود و API اولیه است. این نمونه‌هایی از سیستم تم CompositionLocal s را می‌سازد - با استفاده از مقادیر واقعی هر منطقی که لازم باشد - که با 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

{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}