Adnotacje z treścią można dodać do każdej ramki, grupy lub komponentu aplikacji Figma. , aby wskazać, że jego elementy podrzędne są dynamiczne. Można to wykorzystać do projektowania komponentów kontenera ani do tworzenia przedziałów, w których komponenty niestandardowe może zostać wstrzykiwana przez kod aplikacji.
Aby dodać do ramki lub grupy parametr podrzędny, wybierz warstwę w Figmie i
kliknij przycisk + obok pozycji „Parametry” i wybierz children
.
Po zaimportowaniu pakietu UI do Android Studio parametr pojawia się w
wygenerowany podpis 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 służy do wypełnienia
boks (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 wpływ również na warstwę w następujących sekcjach: sposoby:
- Wszystkie parametry usługi przekaźnika dodane wcześniej do warstwy nie są widoczne. w interfejsie wtyczki Relay for Figma i nie są one dostępne w w kodzie.
- W wygenerowanym kodzie zawartość warstwy nie jest już renderowana przez wartość domyślną. Staje się ona treścią odpowiedniego elementu kompozycyjnego tylko w podgląd. Aby funkcja kompozycyjna mogła zawierać jakąkolwiek treść, deweloper musi napisz kod przekazujący treść do parametru podrzędnego.
Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Podstawowe informacje o układzie tworzenia wiadomości
- Dodawanie parametrów
- Wyświetlanie podglądu UI za pomocą funkcji kompozycyjnych