Instâncias de pacotes aninhadas

Os pacotes de interface podem conter (ou "aninhar") instâncias de outros pacotes de interface, com suporte conteúdo dinâmico e interatividade em cada nível, tudo importado automaticamente usando o plug-in do Relay para o Android Studio.

Adicionar instâncias aninhadas e expor parâmetros aninhados

As instâncias de pacote podem ser adicionadas como você normalmente adicionaria instâncias de componentes em Figma.

Depois de adicionar uma instância de pacote aninhada a um pacote, é possível adicionar conteúdo e de interação com base nos parâmetros de instância aninhados, assim como 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 é possível fornecer uma para o pai, que é transmitido a uma instância do objeto aninhado componente de código do pacote.

Se a instância aninhada estiver presente em diversas variantes do Figma no arquivo pai a interface agrupa instâncias de variantes para ativar configurações individuais.

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.

Vamos conferir 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âmetro chip-text da instância do Chip
  • sub-icon
  • details

• O pacote Reservation Card contém um pacote Description Card. Os parâmetros são:

  • hero-image

  • headline, que expõe o title da instância de Description Card .

  • reservation-text, que expõe o objeto da instância de Description Card parâmetro chip-text.

  • summary, que expõe o details da instância de 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:

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

2. 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, selecionou a instância Description Card e expôs os detalhes. .

   

3. No painel do lado direito do plug-in do Relay para Figma, você pode selecionar um parâmetro diferente ou renomeie o parâmetro para mudar como ele é chamado o código gerado. Neste exemplo, o parâmetro é renomeado como summary, que ainda se refere ao parâmetro details de nossa biblioteca instância.

   

Quando você importa um componente pai (neste caso, Reserva Card) para 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ó é convertido 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 é 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 Chip alterando o texto do ícone de texto do ícone. para "Reserva necessária":

Se o Chip não tiver um parâmetro para o texto, no código gerado, o O ícone do Description Card ainda mostra "Chip Text", não "Reserva necessária".

@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 Chip tiver um parâmetro para o texto, como chip-text, código gerado, DescriptionCard chama Chip com "Reserva necessária" quando 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 expõe o parâmetro chi-text do chip como subchip-text, no código gerado, DescriptionCard terá um subchipText. e chama Chip com subchipText como o valor do 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 a opção "Reserva obrigatória" é o valor de um parâmetro, aparece no código gerado somente 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

• O componente aninhado com as mesmas propriedades de variante que o componente pai falha ao compilar
• A atualização de recursos fora de ui-packages não força um novo build