در Jetpack Compose Glimmer، سطوح از شکلها برای تعریف مرزهای بصری و میزان گرد بودن خود استفاده میکنند. کلاس Shapes سطوح مختلفی از گرد بودن را برای انواع مختلف اجزا ارائه میدهد.

دسته بندی شکل ها
کلاس GlimmerTheme سه اندازه استاندارد برای شکلها تعریف میکند:
- کوچک : شکلی با چهار گوشه هماندازه. برای اجزایی مانند کارتها استفاده میشود. بهطور پیشفرض، این یک
RoundedCornerShapeبا اندازه 24.dp است. - Medium : شکلی با چهار گوشه هماندازه که اندازه آنها بین کوچک و بزرگ است. این رایجترین شکل مورد استفاده است و به طور پیشفرض در surface استفاده میشود. به طور پیشفرض، این یک
RoundedCornerShapeبا ابعاد ۳۶.dp است. - بزرگ : شکلی با چهار گوشه کاملاً گرد. این شکل برای اجزایی مانند دکمهها استفاده میشود. به طور پیشفرض، این یک
CircleShapeاست.
مثال: شکلها را از GlimmerTheme بگیرید و آنها را روی کامپوننتها اعمال کنید
ابتدا، شکلهای تعریفشده را از GlimmerTheme.shapes دریافت کنید:
@Composable fun ShapesSample() { val shapes = GlimmerTheme.shapes GlimmerLazyColumn { item { ShapeItem("small", shape = shapes.small) } item { ShapeItem("medium", shape = shapes.medium) } item { ShapeItem("large", shape = shapes.large) } } }
در مرحله بعد، میتوانید این شکلها را روی برخی از اجزا اعمال کنید:
@Composable private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) { Box( modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape), contentAlignment = Alignment.Center, ) { Text(name) } }
سفارشی سازی اشکال
کلاس Shapes @Immutable است. میتوانید یک کپی از شکلهای موجود در تم ایجاد کنید و با استفاده از تابع copy، مقادیر خاص را بازنویسی کنید. این کار را برای حفظ ساختار تم در حین تنظیم شعاعهای خاص برای برند برنامه خود انجام دهید.
مثال: مقادیر شکل خاص را نادیده بگیرید
کد زیر مقادیر شکل خاص را لغو میکند:
val customShapes = GlimmerTheme.shapes.copy(
small = RoundedCornerShape(12.dp),
medium = RoundedCornerShape(20.dp)
)
مقادیر پیشفرض
اگر در GlimmerTheme طور دیگری مشخص نشده باشد، سیستم به طور پیشفرض مقادیر زیر را در نظر میگیرد:
| توکن | شکل پیشفرض | اندازه یا شعاع |
|---|---|---|
| | ۲۴.dp |
| | ۳۶.dp |
| | کاملاً گرد |