قالبها در 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 = "" ) } /* ... */
تابع تم
تابع theme نقطه ورود و API اصلی است. این تابع نمونههایی از سیستم تم CompositionLocal را - با استفاده از مقادیر واقعی و هر منطق مورد نیاز - میسازد که با CompositionLocalProvider به درخت ترکیب ارائه میشوند. پارامتر content به composableهای تو در تو اجازه میدهد تا به مقادیر قالببندی نسبت به سلسله مراتب دسترسی داشته باشند.
@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
- طراحی متریال ۳ در Compose