Parâmetros filhos

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.

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

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