Parametri secondari

Qualsiasi livello di frame, gruppo o componente Figma può essere annotato con un parametro content per indicare che i relativi elementi secondari sono dinamici. Può essere utilizzato per progettare componenti container o per creare slot nella progettazione in cui i componenti personalizzati possono essere inseriti tramite il codice dell'applicazione.

Per aggiungere un parametro figlio a un frame o gruppo, seleziona il livello in Figma e fai clic sul pulsante + accanto a "Parametri", poi seleziona children dal menu.

Una volta importato il pacchetto UI in Android Studio, il parametro viene visualizzato nella firma della funzione @Composable generata di tipo @Composable RelayContainerScope.() -> Unit (in questo caso denominato customGraphic).

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

Nella funzione @Preview, il design del file Figma viene utilizzato per riempire lo slot (in questo caso è impostato il parametro 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)
                )
            }
        )
    }
}

L'aggiunta di un parametro figlio a un livello influisce anche sul livello nei seguenti modi:

• I parametri Relay aggiunti al livello in precedenza non sono visibili nell'interfaccia utente del plug-in Relay for Figma e non sono disponibili nel codice generato.
• Nel codice generato, i contenuti del livello non vengono più visualizzati per impostazione predefinita. Diventa il contenuto del componibile corrispondente solo nell'anteprima. Affinché l'elemento componibile abbia contenuti, lo sviluppatore deve scrivere il codice per trasferire i contenuti nel parametro figlio.