העיצובים ב-Jetpack פיתוח נייטיב מורכבים מכמה מבנים ברמה נמוכה
וממשקי 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 /* ... */ ) /* ... */
שילוב מקומי של מערכת עיצוב
מחלקות של מערכות עיצוב מסופקות במרומז לעץ היצירה כ
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 /* ... */ }
מומלץ עבורך
- הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
- נתונים בהיקף מקומי באמצעות CompositionLocal
- מערכות עיצוב בהתאמה אישית בכתיבה
- עיצוב Material 2 ב-Compose