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

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

في Jetpack Compose Glimmer، تستخدم المساحات أشكالاً لتحديد حدودها المرئية واستدارتها. يوفر الصف Shapes مستويات مختلفة من الاستدارة مخصّصة لأنواع مختلفة من المكوّنات.

الشكل 1. مثال على الأشكال الكبيرة والمتوسطة والصغيرة في Jetpack Compose Glimmer

فئات الأشكال

يحدّد الصف 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، سيستخدم النظام القيم التلقائية التالية:

الرمز المميز الشكل التلقائي الحجم أو نصف القطر

small

RoundedCornerShape

24.dp

medium

RoundedCornerShape

36.dp

large

CircleShape

مستدير بالكامل