Parametry podrzędne

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.