Вложенные экземпляры пакетов

Пакеты пользовательского интерфейса могут содержать (или «вкладывать») экземпляры других пакетов пользовательского интерфейса с поддержкой динамического контента и интерактивности на каждом уровне — все это автоматически импортируется с помощью плагина Relay для Android Studio.

Добавляйте вложенные экземпляры и предоставляйте вложенные параметры.

Экземпляры пакетов можно добавлять так же, как вы обычно добавляете экземпляры компонентов в Figma .

Добавив в пакет экземпляр вложенного пакета, вы можете добавлять параметры контента и взаимодействия на основе параметров вложенного экземпляра, как и свойства любого другого слоя:

• Выберите слой упакованного экземпляра.
• Нажмите параметр + добавить в пользовательском интерфейсе Relay for Figma.
• Выберите один из параметров вложенного пакета.

Выбранный параметр или взаимодействие предоставляется родительским компонентом, образуя связь между вложенным параметром пакета и новым параметром, добавленным в родительский компонент. В сгенерированном коде теперь вы можете предоставить значение родительскому элементу, которое передается экземпляру компонента кода вложенного пакета.

Если вложенный экземпляр присутствует в нескольких вариантах Figma в родительском компоненте, пользовательский интерфейс группирует экземпляры вариантов, чтобы обеспечить индивидуальную настройку.

По умолчанию параметры вложенного экземпляра пакета не предоставляются родительским компонентом. Вместо этого сгенерированный код использует значение, которое вы указываете в Figma, точно так же, как обычные переопределения параметров.

Давайте посмотрим на этот пример:

• Пакет Chip имеет один текстовый параметр: chip-text .
• В комплект карты описания входит пакет чипа. Его параметры:
  • title
  • subchip-text , который предоставляет параметр chip-text экземпляра Chip.
  • sub-icon
  • details

• Пакет «Карта бронирования» содержит пакет «Карта описания». Его параметры:

  • hero-image

  • headline , который предоставляет параметр title экземпляра карты описания.

  • reservation-text , которое предоставляет параметр chip-text экземпляра карты описания.

  • summary , который предоставляет параметр details об экземпляре карты описания.

Обратите внимание, что sub-icon — это единственный параметр карты описания, который не отображается в карте резервирования. Таким образом, каждый экземпляр карты резервирования использует значок, который по умолчанию предоставляет карта описания.

Чтобы предоставить параметр экземпляра вложенного компонента:

1. Выберите вложенный экземпляр пакета пользовательского интерфейса, имеющий параметры. Вы можете выбрать экземпляр непосредственно на холсте или в плагине Relay for Figma в разделе «Экземпляры реле» .

2. Нажмите + рядом с пунктом «Параметры» . В меню отображаются параметры выбранного экземпляра. Выберите параметр.

   Это предоставляет параметр из вложенного экземпляра. В этом примере мы выбрали экземпляр карты описания и предоставили параметр сведений .

   

3. На панели в правой части плагина Relay for Figma вы можете выбрать другой параметр или переименовать параметр, чтобы изменить способ его вызова в сгенерированном коде. В этом примере параметр переименован в summary , который по-прежнему ссылается на параметр Details из нашего вложенного экземпляра.

   

Когда вы импортируете родительский компонент (в данном случае Reservation Card ) в Android Studio, автоматически импортируются все вложенные пакеты (в данном случае Description Card и Chip ). Когда код генерируется, каждый пакет генерирует свою собственную составную функцию.

Сгенерированный код для примера выглядит так:

Карта бронирования.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,
) {...}

Если у Chip есть параметр для своего текста, скажем, chip-text , то в сгенерированном DescriptionCard вызывает Chip с «Reservation Required» в качестве значения параметра chipText :

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

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

Если карта описания предоставляет параметр чип-текста чипа как субчип-текст , то в сгенерированном коде 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
) {...}

Более того, теперь, когда «Reservation Required» является значением параметра, оно отображается в сгенерированном коде только при предварительном просмотре DescriptionCard.

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

Ограничения

• Вложенный компонент с теми же свойствами варианта, что и родительский компонент, не удается скомпилировать.
• Обновление ресурсов вне ui-пакетов не приводит к созданию новой сборки.