الأشكال في Jetpack Compose Glimmer

أجهزة XR المشمولة

تساعدك هذه الإرشادات في إنشاء تجارب لهذه الأنواع من أجهزة XR.

مزيد من المعلومات حول أنواع أجهزة XR →

مزيد من المعلومات حول أنواع أجهزة XR →

في 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) }
    }
}
ShapesSamples.kt

بعد ذلك، يمكنك تطبيق هذه الأشكال على بعض المكوّنات:

@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)
    }
}
ShapesSamples.kt

تخصيص الأشكال

الصف Shapes هو @Immutable. يمكنك إنشاء نسخة من أشكال المظهر الحالية وتجاوز قيم معيّنة باستخدام وظيفة النسخ. يجب إجراء ذلك للحفاظ على بنية المظهر مع تعديل نصف القطر المحدّد الخاص بالعلامة التجارية لتطبيقك.

مثال: تجاهل قيم أشكال معيّنة

يُلغي الرمز التالي قيم أشكال معيّنة:

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

القيم التلقائية

إذا لم يتم تحديد خلاف ذلك في GlimmerTheme، سيستخدم النظام القيم التلقائية التالية: