تشریح مضمون در 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 اصلی است. بااستفاده از مقادیر واقعی و هر منطق موردنیاز، نمونه‌هایی از سیستم زمینه CompositionLocals می‌سازد که با 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
    /* ... */
}