مثيلات الحزمة المتداخلة

يمكن أن تحتوي حِزم واجهة المستخدم على (أو "تضمين") مثيلات من حِزم واجهة المستخدم الأخرى، مع إتاحة المحتوى الديناميكي والتفاعل على كل مستوى. ويتم استيراد كل ذلك تلقائيًا باستخدام المكوّن الإضافي Relay for Android Studio.

إضافة مثيلات متداخلة وعرض المَعلمات المتداخلة

يمكن إضافة مثيلات الحزمة كما تفعل عادةً لإضافة مثيلات المكون في Figma.

بمجرد إضافة مثيل حزمة مدمجة إلى حزمة، يمكنك إضافة معلمات المحتوى والتفاعل بناءً على معلمات المثيل المتداخلة، تمامًا مثل خصائص أي طبقة أخرى:

• اختر طبقة النسخة الافتراضية المجمّعة.
• انقر على معلمة الإضافة + في أداة الترحيل لواجهة مستخدم Figma.
• حدد إحدى معلمات الحزمة المتداخلة.

يتم عرض المعلمة المحددة أو التفاعل المحدد من خلال المكون الأصلي، مما يشكل اتصالًا بين معلمة الحزمة المتداخلة ومعلمة جديدة تمت إضافتها إلى المكون الأصلي. في التعليمة البرمجية التي تم إنشاؤها، يمكنك الآن توفير قيمة إلى الأصل، والتي يتم تمريرها إلى مثيل لمكون التعليمات البرمجية للحزمة المتداخلة.

إذا كان المثيل المدمج موجودًا في متغيرات Figma متعددة في المكون الأصلي، فإن واجهة المستخدم تجمع المثيلات المتغيرة لتمكين التهيئة الفردية.

بشكل افتراضي، لا يعرض المكون الرئيسي معلمات مثيل الحزمة المتداخلة. بدلاً من ذلك، يستخدم التعليمة البرمجية التي تم إنشاؤها القيمة التي تحددها في Figma، تمامًا مثل إلغاءات المعلمات العادية.

لنلقِ نظرة على هذا المثال:

• تتضمن حزمة Chip معلَمة نصية واحدة، وهي chip-text.
• تحتوي حزمة بطاقة الوصف على حزمة شريحة. معلَماتها هي:
  • title
  • subchip-text، الذي يعرض المَعلمة chip-text لمثيل الشريحة
  • sub-icon
  • details

• تحتوي حزمة بطاقة الحجز على حزمة بطاقة الوصف. معلماتها هي:

  • hero-image

  • headline، الذي يعرض معلَمة title للمثيل بطاقة الوصف.

  • reservation-text، الذي يعرض المَعلمة chip-text لمثيل بطاقة الوصف.

  • summary، الذي يعرض معلَمة details للمثيل بطاقة الوصف.

تجدر الإشارة إلى أنّ sub-icon هي المعلَمة الوحيدة في بطاقة الوصف التي لا تظهر في بطاقة الحجز. لذلك، يستخدم كل مثيل من بطاقة الحجز الرمز الذي توفره بطاقة الوصف بشكل افتراضي.

لعرض مَعلمة لمثيل مكوّن مدمج:

1. حدد مثيلاً مدمجًا لحزمة واجهة المستخدم التي تحتوي على معلمات. يمكنك تحديد المثيل في اللوحة مباشرة أو في المكون الإضافي Relay for Figma ضمن مثيلات الترحيل.

2. انقر على + بجانب المَعلمات. تعرض القائمة المعلمات من المثيل المحدد. اختَر مَعلمة.

   يؤدي ذلك إلى عرض معلَمة من المثيل المدمج. في هذا المثال، اخترنا مثيل بطاقة الوصف وعرضنا المَعلمة details.

   

3. في الجزء الموجود على الجانب الأيمن من المكون الإضافي Relay for Figma، يمكنك تحديد معلمة مختلفة أو إعادة تسمية المعلمة لتغيير كيفية استدعائها في التعليمة البرمجية التي تم إنشاؤها. في هذا المثال، تُعاد تسمية المعلَمة إلى summary، ما زال يشير إلى المَعلمة details من المثيل المُدمج.

   

عند استيراد مكوّن رئيسي (في هذه الحالة، بطاقة الحجز) إلى Android Studio، يتم تلقائيًا استيراد كل الحِزم المدمجة (في هذه الحالة، بطاقة الوصف والشريحة). عند إنشاء التعليمة البرمجية، تنشئ كل حزمة دالتها القابلة للإنشاء الخاصة بها.

يبدو الرمز الذي تم إنشاؤه للمثال على النحو التالي:

حجزCard.kt

..
import com.example.hellofigma.descriptioncard.DescriptionCard
...

@Composable
fun ReservationCard(
    modifier: Modifier = Modifier,
    heroImage: Painter,
    headline: String,
    summary: String,
    reservationText: String
) {
    ...
    DescriptionCard(
        title = headline,
        details = summary,
        subchipText = reservationText,
        subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
        modifier = modifier
    )
    ...
}

DescriptionCard.kt

...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    title: String,
    details: String,
    subchipText: String,
    subIcon: Painter
) {
   ...
   Chip(chipText = subchipText)
   ...
}

إلغاء خصائص مثيل الحزمة المتداخلة

إذا قمت بتجاوز قيمة خاصية مثيل مدمج في Figma، فلا تتم ترجمة القيمة الجديدة في التعليمات البرمجية Compose إلا إذا أضاف المكون المتداخل معلمة لتلك الخاصية. وإلا، يتم إسقاط القيمة الجديدة، ويتم استخدام القيمة الأصلية في المكون المتداخل في التعليمة البرمجية.

لنأخذ هذا المثال. يحتوي مكوّن بطاقة الوصف على مثيل للمكوِّن Chip. لقد أضفنا إلغاءً إلى مثيل الشريحة من خلال تغيير النص من "نص الشريحة" إلى "الحجز مطلوب":

إذا لم تكن الشريحة تتضمن مَعلمة لنصها، ستظل شريحة بطاقة الوصف تعرض "نص الشريحة" وليس "الحجز مطلوب" في الرمز الذي تم إنشاؤه.

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier
        // No parameter available to override the chip's text
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
) {...}

إذا كانت شريحة تحتوي على معلَمة للنص الخاص بها، على سبيل المثال chip-text، فإنّ DescriptionCard في الرمز الذي تم إنشاؤه يستدعي Chip مع تضمين "الحجز مطلوب" كقيمة للمعلَمة chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier,
        chipText = "Reservation Required"
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

إذا كانت بطاقة الوصف تعرض معلَمة شريحة نص الشريحة على أنّها subchip-text، تتضمّن DescriptionCard في الرمز الذي تم إنشاؤه المَعلمة subchipText وتستدعي Chip مع تضمين subchipText كقيمة للمعلَمة chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    subchipText: String
) {
    ...
    Chip(
        modifier = modifier,
        chipText = subchipText
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

علاوةً على ذلك، بعد أن أصبحت عبارة "الحجز مطلوب" هي قيمة المعلَمة، فإنّها تظهر في الرمز الذي تم إنشاؤه فقط في معاينة DescriptionCard.

@Preview
@Composable
private fun DescriptionCardPreview() {
    MaterialTheme {
        RelayContainer {
            DescriptionCard(
                subchipText = "Reservation Required",
                modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
            )
        }
    }
}

القيود

• تعذُّر تجميع المكوِّن المُدمج الذي له خصائص الصيغ نفسها مثل المكوِّن الرئيسي
• لا يؤدي تعديل الموارد خارج حزم واجهة المستخدم إلى فرض إنشاء جديد