Parámetros secundarios

Cualquier capa de marco, grupo o componente de Figma se puede anotar con un parámetro de contenido a fin de indicar que sus elementos secundarios son dinámicos. Esto se puede usar para diseñar componentes de contenedor o crear ranuras en el diseño en las que el código de la aplicación pueda insertar componentes personalizados.

Si deseas agregar un parámetro secundario a un marco o grupo, selecciona la capa en Figma y haz clic en el botón + junto a "Parameters" y, luego, selecciona children en el menú.

Una vez que se importa el paquete de IU a Android Studio, el parámetro aparece en la firma de la función @Composable generada, con el tipo @Composable RelayContainerScope.() -> Unit (en este caso, se llama customGraphic).

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

En la función @Preview, el diseño del archivo de Figma se usa para rellenar la ranura (en este caso, se establece el parámetro 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)
                )
            }
        )
    }
}

Cuando se agrega un parámetro secundario a una capa, también afecta a la capa de las siguientes maneras:

• Los parámetros de Relay que se hayan agregado con anterioridad a la capa no estarán visibles en la IU del complemento Relay for Figma y no estarán disponibles en el código generado.
• En el código generado, el contenido de la capa ya no se renderiza de forma predeterminada. Se convierte en el contenido del elemento correspondiente que admite composición solo en la vista previa. Para que ese elemento tenga contenido, el desarrollador debe escribir código a fin de pasar contenido al parámetro secundario.