המבנה של עיצוב בנייטיב

עיצובים ב-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
    /* ... */
)

/* ... */

Theme system composition locals

מחלקות של מערכת העיצוב מסופקות באופן מרומז לעץ הקומפוזיציה כמופעים של 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
    /* ... */
}