Os pacotes de interface podem conter (ou "aninhar") instâncias de outros pacotes de interface, com suporte a conteúdo dinâmico e interatividade em cada nível. Todos eles são importados automaticamente usando o plug-in Relay para o Android Studio.
Adicionar instâncias aninhadas e expor parâmetros aninhados
As instâncias de pacote podem ser adicionadas da mesma forma que você adicionaria instâncias de componentes no Figma.
Depois de adicionar uma instância aninhada a um pacote, é possível incluir conteúdo e parâmetros de interação com base nos parâmetros da instância aninhada, assim como as propriedades de qualquer outra camada:
- Selecione a camada da instância de pacote.
- Clique no parâmetro de adição + na IU do Relay para Figma.
- Selecione um dos parâmetros de pacote aninhados.
O parâmetro ou a interação selecionado é exposto pelo componente pai, formando uma conexão entre o parâmetro de pacote aninhado e um novo parâmetro adicionado ao componente pai. No código gerado, agora você pode fornecer um valor ao pai, que é transmitido para uma instância do componente de código do pacote aninhado.
Se a instância aninhada estiver presente em diversas variantes do Figma no componente pai, a interface vai agrupar instâncias de variantes para ativar a configuração individual.
Por padrão, os parâmetros de instância do pacote aninhado não são expostos pelo componente pai. Em vez disso, o código gerado usa o valor especificado no Figma, assim como as substituições normais de parâmetros.
Confira este exemplo:
- O pacote Chip tem um parâmetro de texto,
chip-text
. - O pacote Description Card contém um pacote Chip. Os parâmetros
são:
title
subchip-text
, que expõe o parâmetrochip-text
da instância do Chipsub-icon
details
O pacote Reservation Card contém um pacote Description Card. Os parâmetros são:
hero-image
headline
, que expõe o parâmetrotitle
da instância Description Card.reservation-text
, que expõe o parâmetrochip-text
da instância de Description Card.summary
, que expõe o parâmetrodetails
da instância Description Card.
sub-icon
é o único parâmetro do Description Card que não é
exposto pelo Reservation Card. Todas as instâncias de um Reservation Card
usam o ícone que o Description Card fornece por padrão.
Para expor um parâmetro de uma instância de componente aninhado:
- Selecione uma instância aninhada de um pacote de IU que tenha parâmetros. Você pode selecionar a instância diretamente na tela ou no plug-in Relay para Figma em Relay instances.
Clique em + ao lado de Parameters. O menu mostra os parâmetros da instância selecionada. Selecione um parâmetro.
Isso expõe um parâmetro da instância aninhada. Neste exemplo, selecionamos a instância do Description Card e expomos o parâmetro details.
No painel à direita do plug-in Relay para Figma, é possível selecionar um parâmetro diferente ou renomear o parâmetro para mudar a forma como ele é chamado no código gerado. Neste exemplo, o parâmetro é renomeado como summary, que ainda se refere ao parâmetro details da nossa instância aninhada.
Quando você importa um componente pai (neste caso, Reserva Card) para o Android Studio, todos os pacotes aninhados são importados automaticamente (neste caso, Description Card e Chip). Quando o código é gerado, cada pacote cria a própria função de composição.
O código gerado para o exemplo vai ficar assim:
ReservationCard.kt
..
import com.example.hellofigma.descriptioncard.DescriptionCard
...
@Composable
fun ReservationCard(
modifier: Modifier = Modifier,
heroImage: Painter,
headline: String,
summary: String,
reservationText: String
) {
...
DescriptionCard(
title = headline,
details = summary,
subchipText = reservationText,
subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
modifier = modifier
)
...
}
DescriptionCard.kt
...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
title: String,
details: String,
subchipText: String,
subIcon: Painter
) {
...
Chip(chipText = subchipText)
...
}
Modificar as propriedades da instância de pacote aninhada
Se você substituir o valor de uma propriedade de instância aninhada no Figma, o novo valor só vai ser traduzido no código do Compose se o componente aninhado tiver adicionado um parâmetro para essa propriedade. Caso contrário, o novo valor será descartado e o valor original no componente aninhado será usado no código.
Vamos conferir este exemplo. O componente Description Card tem uma instância do componente Chip. Adicionamos uma substituição à instância de Chip mudando o texto de "Chip Text" para "Reserva necessária":
Se o Chip não tiver um parâmetro para o texto, o ícone Description Card's ainda vai mostrar "Texto do ícone", e não "Reserva necessária" no código gerado.
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
) {
...
Chip(
modifier = modifier
// No parameter available to override the chip's text
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
) {...}
Se o Chip tiver um parâmetro para o texto, por exemplo, chip-text, no
código gerado, DescriptionCard
chamará Chip
com "Reserva necessária" como
o valor do parâmetro chipText
:
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
) {
...
Chip(
modifier = modifier,
chipText = "Reservation Required"
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
chipText: String
) {...}
Se o Description Card expuser o parâmetro Chip-text como
subchip-text, no código gerado, DescriptionCard
vai ter um parâmetro subchipText
e chamar Chip
com subchipText
como o valor do parâmetro
chipText
:
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
subchipText: String
) {
...
Chip(
modifier = modifier,
chipText = subchipText
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
chipText: String
) {...}
Além disso, agora que "Reserva necessária" é o valor de um parâmetro, ele aparece no código gerado apenas na visualização do DescriptionCard.
@Preview
@Composable
private fun DescriptionCardPreview() {
MaterialTheme {
RelayContainer {
DescriptionCard(
subchipText = "Reservation Required",
modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
)
}
}
}
Limitações
- Falha na compilação do componente aninhado com as mesmas propriedades de variante que o componente pai
- A atualização de recursos fora de ui-packages não força um novo build
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Como mapear componentes para códigos existentes
- Parâmetros de conteúdo
- Conceitos básicos de layout do Compose