Qualquer camada de frame, grupo ou componente do Figma pode ser anotada com um parâmetro de conteúdo para indicar que os filhos são dinâmicos. Isso pode ser usado para projetar componentes de contêiner ou criar slots no design em que componentes personalizados podem ser injetados pelo código do aplicativo.
Para adicionar um parâmetro filho a um frame ou grupo, selecione a camada no Figma e
clique no botão + ao lado de "Parâmetros". Em seguida, selecione children
no
menu.
![Parâmetro filho no Figma](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/children-parameters/child-parameter.png?authuser=8&hl=pt-br)
Depois que o pacote de IU é importado para o Android Studio, o parâmetro aparece na
assinatura da função @Composable
gerada com o tipo @Composable
RelayContainerScope.() -> Unit
(neste caso, chamado de customGraphic
).
@Composable
fun HelloCardWithCustomChild(
modifier: Modifier = Modifier,
customGraphic: @Composable RelayContainerScope.() -> Unit
) {
TopLevel(modifier = modifier) {
Image()
CustomGraphic { customGraphic() }
Title()
}
}
Na função @Preview
, o design do arquivo Figma é usado para preencher o
slot (neste caso, o parâmetro customGraphic
é definido).
![O elemento filho no Figma retido na visualização](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/children-parameters/childe-element-in-preview.png?authuser=8&hl=pt-br)
@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)
)
}
)
}
}
Adicionar um parâmetro filho a uma camada também a afeta destas maneiras:
- Os parâmetros de redirecionamento que foram adicionados à camada anteriormente não são visíveis na IU do plug-in Relay para Figma e não estão disponíveis no código gerado.
- No código gerado, o conteúdo da camada não é mais renderizado por padrão. Ele se torna o conteúdo da função de composição correspondente apenas na visualização. Para que a função de composição tenha conteúdo, o desenvolvedor precisa programar o código para transmitir conteúdo ao parâmetro filho.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Conceitos básicos de layout do Compose
- Adicionar parâmetros
- Conferir a interface com visualizações de elementos combináveis