Do każdej warstwy ramki, grupy lub komponentu Figma można dodać adnotację z parametrem content, która wskazuje, że jej elementy podrzędne są dynamiczne. Można go wykorzystać do projektowania komponentów kontenera lub tworzenia przedziałów w projekcie, w których komponenty niestandardowe mogą być wstrzykiwane przez kod aplikacji.
Aby dodać do ramki lub grupy parametr podrzędny, wybierz warstwę w Figmie, kliknij przycisk + obok pozycji „Parametry”, a następnie wybierz w menu children
.
Gdy zaimportujesz pakiet UI do Android Studio, parametr pojawi się w wygenerowanym podpisie funkcji @Composable
typu @Composable
RelayContainerScope.() -> Unit
(w tym przypadku o nazwie customGraphic
).
@Composable
fun HelloCardWithCustomChild(
modifier: Modifier = Modifier,
customGraphic: @Composable RelayContainerScope.() -> Unit
) {
TopLevel(modifier = modifier) {
Image()
CustomGraphic { customGraphic() }
Title()
}
}
W funkcji @Preview
projekt z pliku Figma jest używany do wypełnienia boksu (w tym przypadku ustawiany jest parametr customGraphic
).
@Preview(widthDp = 248, heightDp = 265)
@Composable
private fun HelloCardWithCustomChildPreview() {
MaterialTheme {
HelloCardWithCustomChild(
customGraphic = {
RelayText(
content = "Label",
fontSize = 16.0.sp,
fontFamily = montserrat,
color = Color(
alpha = 255,
red = 0,
green = 0,
blue = 0
),
textAlign = TextAlign.Left,
fontWeight = FontWeight(500.0.toInt())
)
RelayImage(
image = painterResource(
R.drawable.hello_card_with_custom_child_custom_graphic_still
),
contentScale = ContentScale.Crop,
modifier =
Modifier.requiredWidth(132.0.dp).requiredHeight(48.0.dp)
)
}
)
}
}
Dodanie do warstwy parametru podrzędnego ma również wpływ na warstwę w następujący sposób:
- Wszelkie parametry usługi Relay dodane wcześniej do warstwy nie są widoczne w interfejsie wtyczki Relay for Figma i nie są dostępne w wygenerowanym kodzie.
- W wygenerowanym kodzie zawartość warstwy nie jest już domyślnie renderowana. Staje się on treścią odpowiedniego elementu kompozycyjnego tylko w podglądzie. Aby funkcja kompozycyjna mogła zawierać dowolną treść, deweloper musi napisać kod przekazujący treść do parametru podrzędnego.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Podstawowe informacje o układzie wiadomości
- Dodawanie parametrów
- Wyświetlanie podglądu interfejsu za pomocą podglądów funkcji kompozycyjnych