Istanze di pacchetti nidificate

I pacchetti UI possono contenere (o "nidificare") istanze di altri pacchetti UI con supporto per contenuti dinamici e interattività a ogni livello, tutti importati automaticamente utilizzando il plug-in Relay for Android Studio.

Aggiungere istanze nidificate ed esporre i parametri nidificati

Le istanze del pacchetto possono essere aggiunte come faresti normalmente per aggiungere istanze dei componenti in Figma.

Dopo aver aggiunto un'istanza di pacchetto nidificata a un pacchetto, puoi aggiungere parametri di contenuto e interazione in base ai parametri dell'istanza nidificati, proprio come le proprietà di qualsiasi altro livello:

• Seleziona il livello dell'istanza in pacchetto.
• Fai clic sul parametro di aggiunta + nell'interfaccia utente di Relay for Figma.
• Seleziona uno dei parametri del pacchetto nidificato.

Il parametro o l'interazione selezionata viene esposto dal componente principale, creando una connessione tra il parametro del pacchetto nidificato e un nuovo parametro aggiunto al componente principale. Nel codice generato, ora puoi fornire all'elemento padre un valore che viene trasmesso a un'istanza del componente di codice del pacchetto nidificato.

Se l'istanza nidificata è presente in più varianti Figma nel componente principale, l'interfaccia utente raggruppa le istanze delle varianti per abilitare la singola configurazione.

Per impostazione predefinita, i parametri dell'istanza del pacchetto nidificato non sono esposti dal componente padre. Al contrario, il codice generato utilizza il valore specificato in Figma, proprio come i normali override dei parametri.

Esaminiamo questo esempio:

• Il pacchetto Chip ha un parametro di testo, chip-text.
• La scheda descrittiva contiene un pacchetto chip. I suoi parametri sono:
  • title
  • subchip-text, che espone il parametro chip-text dell'istanza di chip
  • sub-icon
  • details

• Il pacchetto Prenotazione contiene un pacchetto Scheda descrittiva. I suoi parametri sono:

  • hero-image

  • headline, che espone il parametro title dell'istanza della scheda descrittiva.

  • reservation-text, che espone il parametro chip-text dell'istanza della scheda descrittiva.

  • summary, che espone il parametro details dell'istanza della scheda descrittiva.

Tieni presente che sub-icon è l'unico parametro della scheda descrittiva che non viene esposto dalla scheda di prenotazione. Di conseguenza, ogni istanza di una scheda di prenotazione utilizza l'icona fornita per impostazione predefinita dalla scheda descrittiva.

Per esporre un parametro di un'istanza di componente nidificata:

1. Seleziona un'istanza nidificata di un pacchetto UI con parametri. Puoi selezionare l'istanza direttamente nel canvas o nel plug-in Relay for Figma in Istanze di inoltro.

2. Fai clic sul + accanto a Parametri. Il menu mostra i parametri dell'istanza selezionata. Seleziona un parametro.

   In questo modo viene esposto un parametro dall'istanza nidificata. In questo esempio, abbiamo selezionato l'istanza Scheda descrittiva ed esposto il parametro details.

   

3. Nel riquadro sul lato destro del plug-in Relay for Figma, puoi selezionare un altro parametro o rinominare il parametro per cambiarne la chiamata nel codice generato. In questo esempio, il parametro viene rinominato in summary, che fa ancora riferimento al parametro details dall'istanza nidificata.

   

Quando importi un componente principale (in questo caso, Reservation Card) in Android Studio, tutti i pacchetti nidificati vengono importati automaticamente (in questo caso, Scheda descrittiva e Chip). Quando viene generato il codice, ogni pacchetto genera la propria funzione componibile.

Il codice generato per l'esempio ha il seguente aspetto:

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

SchedaDescrizione.kt

...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    title: String,
    details: String,
    subchipText: String,
    subIcon: Painter
) {
   ...
   Chip(chipText = subchipText)
   ...
}

Proprietà di override dell'istanza del pacchetto nidificata

Se sostituisci il valore di una proprietà dell'istanza nidificata in Figma, il nuovo valore viene tradotto nel codice Compose solo se il componente nidificato ha aggiunto un parametro per quella proprietà. In caso contrario, il nuovo valore viene ignorato e il valore originale nel componente nidificato viene utilizzato nel codice.

Vediamo questo esempio. Il componente Scheda descrittiva ha un'istanza del componente Chip. Abbiamo aggiunto un override all'istanza Chip modificando il testo da "Testo chip" a "Prenotazione obbligatoria":

Se Chip non ha un parametro per il proprio testo, nel codice generato il chip della scheda descrittiva indicherà ancora "Testo chip", non "Prenotazione obbligatoria".

@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 ha un parametro per il testo, ad esempio chip-text, nel codice generato DescriptionCard chiama Chip con "Prenotazione obbligatoria" come valore del parametro chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier,
        chipText = "Reservation Required"
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

Se Scheda descrittiva espone il parametro chip-text del chip come subchip-text, nel codice generato DescriptionCard ha un parametro subchipText e chiama Chip con subchipText come valore del parametro chipText:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    subchipText: String
) {
    ...
    Chip(
        modifier = modifier,
        chipText = subchipText
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

Inoltre, ora che "Prenotazione obbligatoria" è il valore di un parametro, questo viene visualizzato nel codice generato solo nell'anteprima della scheda descrittiva.

@Preview
@Composable
private fun DescriptionCardPreview() {
    MaterialTheme {
        RelayContainer {
            DescriptionCard(
                subchipText = "Reservation Required",
                modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
            )
        }
    }
}

Limitazioni

• Il componente nidificato con le stesse proprietà delle varianti del componente principale non riesce a compilare
• L'aggiornamento delle risorse all'esterno dei pacchetti ui non forza la creazione di una nuova build

Consigliato per te

• Nota: il testo del link viene visualizzato quando JavaScript è disattivato
• Mappatura dei componenti al codice esistente
• Parametri dei contenuti
• Nozioni di base sul layout di scrittura