Zagnieżdżone instancje pakietów

Pakiety UI mogą zawierać (czyli „zagnieździć”) instancje innych pakietów UI, obsługiwać na każdym poziomie obsługę treści dynamicznych i interaktywność – wszystko jest automatycznie importowane przy użyciu wtyczki Relay for Android Studio.

Dodaj zagnieżdżone instancje i ujawnij zagnieżdżone parametry.

Instancje pakietów można dodawać w taki sam sposób jak dodawanie instancji komponentów w aplikacji Figma.

Po dodaniu zagnieżdżonej instancji pakietu do pakietu możesz dodawać parametry treści i interakcji na podstawie zagnieżdżonych parametrów instancji, tak jak właściwości każdej innej warstwy:

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

Wybrany parametr lub interakcja jest widoczna przez komponent nadrzędny, tworząc połączenie między zagnieżdżonym parametrem pakietu a nowym parametrem dodanym do komponentu nadrzędnego. W wygenerowanym kodzie możesz teraz podać wartość dla elementu nadrzędnego, która jest przekazywana do wystąpienia komponentu kodu zagnieżdżonego pakietu.

Jeśli zagnieżdżona instancja występuje w wielu wariantach Figma w komponencie nadrzędnym, interfejs grupuje wystąpienia wariantów, aby umożliwić korzystanie z pojedynczej konfiguracji.

Domyślnie zagnieżdżone parametry instancji pakietu nie są ujawniane przez komponent nadrzędny. Zamiast tego wygenerowany kod użyje wartości określonej w Figmie, tak jak w przypadku standardowych zastąpień parametrów.

Spójrzmy na ten przykład:

• Pakiet Chip zawiera jeden parametr tekstowy: chip-text.
• Pakiet karty opisu zawiera pakiet chipów. Jej parametry:
  • title
  • subchip-text, który ujawnia parametr chip-text instancji Chip
  • sub-icon
  • details

• Pakiet karty rezerwacji zawiera pakiet karty opisu. Jej parametry:

  • hero-image

  • headline, który ujawnia parametr title instancji karty opisu.

  • reservation-text, który ujawnia parametr chip-text instancji karty opisu.

  • summary, który ujawnia parametr details instancji karty opisu.

Pamiętaj, że sub-icon to jedyny parametr na karcie opisu, który nie jest widoczny dla karty rezerwacji. Dlatego każde wystąpienie karty rezerwacji domyślnie używa ikony karty opisu.

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

1. Wybierz zagnieżdżoną instancję pakietu UI z parametrami. Instancję możesz wybrać bezpośrednio w obszarze roboczym lub we wtyczce Relay for Figma w sekcji Relay instances (Instancje przekaźnika).

2. Kliknij + obok pozycji Parametry. W menu widoczne są parametry z wybranej instancji. Wybierz parametr.

   Ujawni to parametr z zagnieżdżonej instancji. W tym przykładzie wybraliśmy wystąpienie karty opisu i ujawniliśmy parametr details.

   

3. W panelu po prawej stronie wtyczki Relay for Figma możesz wybrać inny parametr lub zmienić jego nazwę, aby zmienić sposób jego wywoływania w wygenerowanym kodzie. W tym przykładzie parametr zmienia się na summary, które nadal odwołuje się do parametru details z naszej zagnieżdżonej instancji.

   

Gdy importujesz komponent nadrzędny (w tym przypadku kartę rezerwacji) do Androida Studio, automatycznie importowane są wszystkie zagnieżdżone pakiety (w tym przypadku karta opisu i element). Gdy kod jest generowany, każdy pakiet generuje własną funkcję kompozycyjną.

Wygenerowany kod dla przykładu wygląda tak:

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

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 pakietu zagnieżdżonego

Jeśli zastąpisz wartość zagnieżdżonej właściwości instancji w Figmie, nowa wartość zostanie przetłumaczona w kodzie tworzenia wiadomości tylko wtedy, gdy komponent zagnieżdżony ma dodany parametr tej właściwości. W przeciwnym razie nowa wartość jest usuwana, a pierwotna wartość z zagnieżdżonego komponentu jest używana w kodzie.

Przeanalizujmy ten przykład. Komponent Karta opisu zawiera instancję komponentu Układ. Dodaliśmy zastąpienie do wystąpienia Chip tekstu z „Tekst elementu” na „Wymagana rezerwacja”:

Jeśli Element nie ma parametru do swojego tekstu, w wygenerowanym kodzie element karty opisu nadal będzie zawierać informację „Tekst elementu”, 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 Chip ma parametr przypisany do tekstu, np. chip-text, to w wygenerowanym kodzie DescriptionCard wywołuje parametr Chip z wartością „Wymagana rezerwacja” jako wartością 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 chip-text jako subchip-text, to w wygenerowanym kodzie DescriptionCard ma parametr subchipText i wywołuje parametr Chip z subchipText jako wartością parametru chipText:

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

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

Poza tym „wymagana rezerwacja” jest teraz wartością parametru, więc pojawia się ona w wygenerowanym kodzie tylko w podglądzie obiektuDescriptionCard.

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

Ograniczenia

• Nie udało się skompilować zagnieżdżonego komponentu o tych samych właściwościach wariantu co komponent nadrzędny
• Aktualizowanie zasobów poza pakietami UI nie wymusza nowej kompilacji

Polecane dla Ciebie

• Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
• Mapowanie komponentów na istniejący kod
• Parametry treści
• Podstawowe informacje o układzie wiadomości