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ú.
![Parámetro secundario en Figma](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/children-parameters/child-parameter.png?authuser=9&hl=es)
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
).
![El elemento secundario de Figma retenido en la vista previa](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/children-parameters/childe-element-in-preview.png?authuser=9&hl=es)
@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.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Conceptos básicos sobre el diseño de Compose
- Agregar parámetros
- Obtén una vista previa de tu IU con vistas previas componibles