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

تم ها در Jetpack Compose از تعدادی ساختار سطح پایین تر و API های مرتبط تشکیل شده اند. اینها را می توان در کد منبع MaterialTheme مشاهده کرد و همچنین می تواند در سیستم های طراحی سفارشی اعمال شود.

کلاس های سیستم تم

یک موضوع معمولاً از تعدادی زیرسیستم تشکیل می شود که مفاهیم بصری و رفتاری مشترک را گروه بندی می کنند. این سیستم ها را می توان با کلاس هایی که دارای مقادیر موضوعی هستند مدل سازی کرد.

برای مثال، MaterialTheme شامل ColorScheme (سیستم رنگ)، Typography (سیستم تایپوگرافی) و Shapes (سیستم شکل) است.

توجه: برای ارائه اطلاعات به کامپایلر Compose، کلاس ها باید با Stable یا @Immutable حاشیه نویسی شوند. برای کسب اطلاعات بیشتر، راهنمای چرخه زندگی اجزای سازنده را بررسی کنید.

@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 بررسی کنید.

توجه: می توانید CompositionLocal یک کلاس را با compositionLocalOf یا staticCompositionLocalOf ایجاد کنید. این توابع دارای یک لامبدای defaultFactory Trailing برای ارائه مقادیر بازگشتی از همان نوع هستند که ارائه می‌کنند. استفاده از پیش فرض های معقول مانند 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

تابع تم

تابع تم نقطه ورود و 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

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