في Jetpack Compose Glimmer، تستخدم المساحات أشكالاً لتحديد حدودها المرئية
واستدارتها. يوفر الصف Shapes مستويات مختلفة من
الاستدارة مخصّصة لأنواع مختلفة من المكوّنات.
فئات الأشكال
يحدّد الصف GlimmerTheme ثلاثة أحجام قياسية للأشكال:
- صغير: شكل بأربع زوايا متساوية الحجم يُستخدم هذا الشكل لمكوّنات مثل البطاقات. تلقائيًا، يكون هذا الشكل
RoundedCornerShapeبقيمة 24.dp. - متوسط: شكل بأربع زوايا متساوية الحجم يتراوح حجمها بين الصغير و
الكبير هذا هو الشكل الأكثر استخدامًا، وهو الشكل التلقائي المستخدَم في المساحة. تلقائيًا، يكون هذا الشكل
RoundedCornerShapeبقيمة 36.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) { val interactionSource = remember { MutableInteractionSource() } Box( modifier .aspectRatio(2.5f) .fillMaxWidth() .surface(interactionSource = interactionSource, shape = shape), contentAlignment = Alignment.Center, ) { Text(name) } }
تخصيص الأشكال
الصف Shapes هو @Immutable. يمكنك إنشاء نسخة من أشكال المظهر الحالية وتعديل قيم معيّنة باستخدام دالة النسخ. يساعدك ذلك في الحفاظ على بنية المظهر مع تعديل أنصاف أقطار معيّنة للعلامة التجارية لتطبيقك.
مثال: تعديل قيم أشكال معيّنة
يعدّل الرمز التالي قيم أشكال معيّنة:
@Composable fun CustomShapesSample() { val customShapes = GlimmerTheme.shapes.copy( small = RoundedCornerShape(12.dp), medium = RoundedCornerShape(20.dp) ) val interactionSource = remember { MutableInteractionSource() } Box( Modifier .aspectRatio(2.5f) .fillMaxWidth() .surface(interactionSource = interactionSource, shape = customShapes.small), contentAlignment = Alignment.Center, ) { Text("custom small") } }
القيم التلقائية
إذا لم يتم تحديد قيم أخرى في GlimmerTheme، سيستخدم النظام القيم التلقائية التالية:
| الرمز المميز | الشكل التلقائي | الحجم أو نصف القطر |
|---|---|---|
|
|
24.dp |
|
|
36.dp |
|
|
مستدير بالكامل |