تشریح مضمون در 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
    /* ... */
)

/* ... */

مکان‌های ترکیب‌بندی سیستم زمینه

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

/* ... */

تابع زمینه

تابع زمینه نقطه ورودی و API اصلی است. این تابع نمونه‌هایی از 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
    )
}

شیء زمینه

دسترسی به سیستم‌های زمینه بااستفاده از شیء دارای ویژگی‌های راحتی انجام می‌شود. برای سازگاری، شیء معمولاً همان نام تابع زمینه را دارد. ویژگی‌های به‌سادگی ترکیب‌بندی محلی فعلی را دریافت می‌کنند.

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