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