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 parametrchip-text
instancji Chipsub-icon
details
Pakiet karty rezerwacji zawiera pakiet karty opisu. Jej parametry:
hero-image
headline
, który ujawnia parametrtitle
instancji karty opisu.reservation-text
, który ujawnia parametrchip-text
instancji karty opisu.summary
, który ujawnia parametrdetails
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:
- 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).
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.
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