نمونه های بسته تو در تو

بسته‌های رابط کاربری می‌توانند شامل (یا «در تونه») نمونه‌هایی از بسته‌های رابط کاربری دیگر باشند، با پشتیبانی از محتوای پویا و تعامل در هر سطح - همه به‌طور خودکار با استفاده از افزونه Relay for Android Studio وارد می‌شوند.

نمونه های تودرتو را اضافه کنید و پارامترهای تودرتو را در معرض دید قرار دهید

نمونه‌های بسته را می‌توان اضافه کرد، همانطور که معمولاً نمونه‌های جزء را در Figma اضافه می‌کنید.

هنگامی که یک نمونه بسته تودرتو به یک بسته اضافه می‌کنید، می‌توانید پارامترهای محتوا و تعامل را بر اساس پارامترهای نمونه تودرتو اضافه کنید، درست مانند ویژگی‌های هر لایه دیگر:

• لایه نمونه بسته بندی شده را انتخاب کنید.
• روی پارامتر + add در Relay for Figma UI کلیک کنید.
• یکی از پارامترهای بسته تودرتو را انتخاب کنید.

پارامتر یا تعامل انتخاب شده توسط مؤلفه والد در معرض دید قرار می گیرد و ارتباطی بین پارامتر بسته تودرتو و پارامتر جدیدی که به مؤلفه والد اضافه می شود تشکیل می دهد. در کد تولید شده، اکنون می توانید مقداری را به والد ارائه دهید که به نمونه ای از مؤلفه کد بسته تودرتو ارسال می شود.

اگر نمونه تودرتو در چندین گونه Figma در مؤلفه والد وجود داشته باشد، UI نمونه های متغیر را برای فعال کردن پیکربندی فردی گروه بندی می کند.

به‌طور پیش‌فرض، پارامترهای نمونه بسته تودرتو توسط مؤلفه والد نمایش داده نمی‌شوند. در عوض، کد تولید شده از مقداری که در Figma مشخص کرده‌اید، استفاده می‌کند، درست مانند نادیده گرفتن پارامترهای معمولی.

بیایید به این مثال نگاه کنیم:

• بسته تراشه دارای یک پارامتر متن است، chip-text .
• بسته توضیحات کارت حاوی یک بسته چیپ است. پارامترهای آن عبارتند از:
  • title
  • subchip-text ، که پارامتر chip-text چیپ نمونه چیپ را نشان می دهد
  • sub-icon
  • details

• بسته رزرو کارت حاوی یک بسته کارت توضیحات است. پارامترهای آن عبارتند از:

  • hero-image

  • headline ، که پارامتر title نمونه کارت توضیحات را نشان می دهد.

  • reservation-text ، که پارامتر chip-text نمونه Description Card را نشان می دهد.

  • summary ، که پارامتر details نمونه توصیف کارت را نشان می دهد.

توجه داشته باشید که sub-icon تنها پارامتر کارت توضیحات است که توسط کارت رزرو نمایش داده نمی شود. بنابراین، هر نمونه از کارت رزرو از نمادی استفاده می کند که کارت توضیحات به طور پیش فرض ارائه می کند.

برای نمایش پارامتر یک نمونه جزء تو در تو:

1. یک نمونه تو در تو از یک بسته UI که دارای پارامتر است را انتخاب کنید. می‌توانید نمونه را مستقیماً در بوم یا در افزونه Relay for Figma در قسمت Relay instances انتخاب کنید.

2. روی + کنار پارامترها کلیک کنید. منو پارامترهای نمونه انتخاب شده را نشان می دهد. یک پارامتر را انتخاب کنید.

   این یک پارامتر از نمونه تودرتو را نشان می دهد. در این مثال، نمونه Description Card را انتخاب کرده و پارامتر جزئیات را در معرض نمایش قرار داده ایم.

   

3. در قسمت سمت راست افزونه Relay for Figma، می‌توانید پارامتر دیگری را انتخاب کنید یا نام پارامتر را تغییر دهید تا نحوه فراخوانی آن را در کد تولید شده تغییر دهید. در این مثال، پارامتر به summary تغییر نام داده است، که همچنان به پارامتر جزئیات از نمونه تودرتوی ما اشاره دارد.

   

وقتی یک مؤلفه والد (در این مورد، کارت رزرو ) را به Android Studio وارد می‌کنید، همه بسته‌های تودرتو به‌طور خودکار وارد می‌شوند (در این مورد، توضیحات کارت و تراشه ). هنگامی که کد تولید می شود، هر بسته تابع قابل ترکیب خود را تولید می کند.

کد تولید شده برای مثال به صورت زیر است:

ReservationCard.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
    )
    ...
}

توضیحاتCard.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 ترجمه می‌شود که مؤلفه تودرتو پارامتری برای آن ویژگی اضافه کرده باشد. در غیر این صورت، مقدار جدید حذف می شود و مقدار اصلی در جزء تو در تو در کد استفاده می شود.

بیایید این مثال را در نظر بگیریم. جزء توضیحات کارت یک نمونه کامپوننت چیپ دارد. با تغییر متن از «متن تراشه» به «رزرو مورد نیاز»، یک جایگزین به نمونه تراشه اضافه کرده‌ایم:

اگر تراشه پارامتری برای متن خود نداشته باشد، در کد تولید شده، تراشه کارت توضیحات همچنان می‌گوید «متن تراشه» نه «رزرو لازم است».

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

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

اگر تراشه یک پارامتر برای متن خود داشته باشد، مثلاً متن تراشه ، سپس در کد تولید شده، DescriptionCard Chip با «رزرو لازم است» به عنوان مقدار پارامتر chipText فراخوانی می‌کند:

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

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

اگر Description Card پارامتر Chip-text را به عنوان 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)
            )
        }
    }
}

محدودیت ها

• مؤلفه تودرتو با ویژگی‌های متغیر مشابه مؤلفه والد کامپایل نمی‌شود
• به روز رسانی منابع خارج از بسته های رابط کاربری، ساخت جدید را مجبور نمی کند