تم ها در 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 /* ... */ ) /* ... */
افراد محلی ترکیب سیستم تم
کلاس های سیستم تم به طور ضمنی به درخت ترکیب به عنوان نمونه های 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
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 ) }
موضوع موضوع
دسترسی به سیستم های تم با استفاده از یک شی با ویژگی های راحتی انجام می شود. برای یکپارچگی، شیء تمایل دارد که به عنوان تابع موضوع نامگذاری شود. ویژگی ها به سادگی ترکیب فعلی را محلی می کنند.
// 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 /* ... */ }
برای شما توصیه می شود
- توجه: وقتی جاوا اسکریپت خاموش است، متن پیوند نمایش داده می شود
- داده های محدوده محلی با CompositionLocal
- سیستم های طراحی سفارشی در Compose
- متریال دیزاین 3 در Compose