Parametry podrzędne

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 .

Parametr podrzędny w elemencie Figma

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

Element podrzędny w Figmie zachowany w podglądzie
@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.
. .