Zagnieżdżone instancje pakietów

Pakiety UI mogą zawierać (lub „zagnieżdżać”) instancje innych pakietów UI z obsługą w przypadku treści dynamicznych i interaktywnych na każdym poziomie – wszystkie elementy są importowane automatycznie przy użyciu wtyczki Relay for Android Studio.

Dodawanie zagnieżdżonych instancji i ujawnianie zagnieżdżonych parametrów

Instancje pakietów można dodawać w taki sam sposób, jak zwykle dodasz instancje komponentów Figma.

Po dodaniu do pakietu wystąpienia zagnieżdżonego pakietu możesz dodać do niego treść na podstawie zagnieżdżonych parametrów instancji, tak jak właściwości dowolnej innej warstwy:

• Wybierz warstwę instancji w pakiecie.
• W interfejsie usługi Relay for Figma kliknij + add parametr (dodaj).
• Wybierz jeden z zagnieżdżonych parametrów pakietu.

wybrany parametr lub interakcja są widoczne dla komponentu nadrzędnego; tworząc połączenie między zagnieżdżonym parametrem pakietu a nowym parametrem do komponentu nadrzędnego. W wygenerowanym kodzie możesz teraz podać do elementu nadrzędnego, która jest przekazywana do instancji zagnieżdżonej z komponentem kodu pakietu.

Jeśli zagnieżdżona instancja znajduje się w kilku wariantach Figma w elemencie nadrzędnym interfejs grupuje instancje wariantów, aby umożliwić ich oddzielną konfigurację.

Domyślnie zagnieżdżone parametry instancji pakietu nie są ujawniane przez instancję nadrzędną . Wygenerowany kod korzysta z wartości podanej w aplikacji Figma, jak zwykłych zastąpień parametrów.

Przyjrzyjmy się temu przykładowi:

• Pakiet Chip ma 1 parametr tekstowy – chip-text.
• Pakiet Karta opisu zawiera pakiet elementów. Jego parametry to:
  • title
  • subchip-text, który udostępnia parametr chip-text instancji układu
  • sub-icon
  • details

• Pakiet karty rezerwacji zawiera pakiet karty opisu. To parametry to:

  • hero-image

  • headline, który udostępnia komponent title instancji karty opisu .

  • reservation-text, który udostępnia chip-text.

  • summary, który udostępnia komponent details instancji karty opisu .

Pamiętaj, że sub-icon to jedyny parametr na karcie opisu, który nie jest widoczne na karcie rezerwacji. Dlatego każde wystąpienie karty rezerwacji korzysta z domyślnej ikony na karcie opisu.

Aby udostępnić parametr instancji zagnieżdżonego komponentu:

1. Wybierz zagnieżdżoną instancję pakietu UI z parametrami. Możesz wybrać instancję w obszarze roboczym bezpośrednio lub we wtyczce Relay for Figma Instancje usługi przekaźnika.

2. Kliknij + obok opcji Parametry. W menu znajdują się parametry z parametru wybranej instancji. Wybierz parametr.

   Udostępnia to parametr z zagnieżdżonej instancji. W tym przykładzie zaznaczył(a) wystąpienie karty opisu i wyświetlono szczegóły .

   

3. W panelu po prawej stronie wtyczki Relay for Figma możesz wybrać wybierz inny parametr lub zmień nazwę parametru, tak aby był wywoływany w wygenerowany kod. W tym przykładzie nazwa parametru to summary, który nadal odnosi się do parametru details z naszych zagnieżdżonych instancji.

   

Gdy zaimportujesz komponent nadrzędny (w tym przypadku kartę rezerwacji) do Android Studio, wszystkie zagnieżdżone pakiety zostaną automatycznie zaimportowane (w tym przypadku Karta opisu i Element). Podczas generowania kodu każdy pakiet generuje własną funkcję kompozycyjną.

Wygenerowany kod przykładu wygląda tak:

Karta rezerwacji.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)
   ...
}

Zastąp właściwości instancji zagnieżdżonego pakietu

Jeśli zastąpisz wartość właściwości zagnieżdżonej instancji w Figma, nowa wartość jest tłumaczony w kodzie tworzenia tylko wtedy, gdy zagnieżdżony komponent dodał parametr dla danej usługi. W przeciwnym razie nowa wartość jest usuwana, a pierwotna wartość który znajduje się w kodzie.

Spójrzmy na ten przykład. Komponent Karta opisu ma element. instancji komponentu. Dodaliśmy zastąpienie do instancji Chip przez zmianę tekst z elementu „Element Text” do sekcji „Wymagana rezerwacja”:

Jeśli element Chip nie ma parametru w tekście, to w wygenerowanym kodzie Element karty opisu nadal wyświetla komunikat „Element Text” (Tekst), a nie „Wymagana rezerwacja”.

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

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

Jeśli element element ma parametr tekstowy, na przykład chip-text, to w wygenerowany kod, DescriptionCard wywołuje Chip z informacją „Wymagana rezerwacja” jako wartość parametru chipText:

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

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

Jeśli karta opisu ujawnia parametr elementu chip-text jako subchip-text, a następnie w wygenerowanym kodzie DescriptionCard zawiera element subchipText i wywołuje Chip z subchipText jako wartością chipText :

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

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

„Wymagana rezerwacja” jest wartością parametru, pojawia się w wygenerowanym kodzie tylko na podglądzie karty descriptionCard.

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

Ograniczenia

• Zagnieżdżony komponent o takich samych właściwościach wariantu jak komponent nadrzędny nie kompilować
• Aktualizowanie zasobów poza pakietami interfejsu nie wymusza utworzenia nowej kompilacji

.