Paramètres enfants

Toute couche frame, groupe ou composant Figma peut être annotée avec un paramètre de contenu pour indiquer que ses enfants sont dynamiques. Vous pouvez ainsi concevoir des composants de conteneur ou créer des emplacements dans la conception où des composants personnalisés peuvent être injectés par le code de l'application.

Pour ajouter un paramètre enfant à un frame ou à un groupe, sélectionnez le calque dans Figma et cliquez sur le bouton + à côté de "Paramètres", puis sélectionnez children dans le menu.

Une fois le package d'interface utilisateur importé dans Android Studio, le paramètre apparaît dans la signature de la fonction @Composable générée avec le type @Composable RelayContainerScope.() -> Unit (dans ce cas, nommée customGraphic).

@Composable
fun HelloCardWithCustomChild(
    modifier: Modifier = Modifier,
    customGraphic: @Composable RelayContainerScope.() -> Unit
) {
    TopLevel(modifier = modifier) {
        Image()
        CustomGraphic { customGraphic() }
        Title()
    }
}

Dans la fonction @Preview, la conception du fichier Figma est utilisée pour remplir l'emplacement (dans ce cas, le paramètre customGraphic est défini).

@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)
                )
            }
        )
    }
}

L'ajout d'un paramètre enfant à un calque a également les implications suivantes :

• Les paramètres de Relay qui ont été ajoutés au calque auparavant ne sont pas visibles dans l'interface utilisateur du plug-in Relay for Figma et ne sont pas disponibles dans le code généré.
• Dans le code généré, le contenu du calque n'est plus affiché par défaut. Il devient le contenu du composable correspondant uniquement dans l'aperçu. Pour que le composable ait du contenu, le développeur doit écrire du code afin de transmettre ce contenu au paramètre enfant ("children").