Instances de package imbriquées

Les packages UI peuvent contenir (ou "imbriquer") des instances d'autres packages UI, avec prise en charge du contenu dynamique et de l'interactivité à chaque niveau. Ils sont tous importés automatiquement à l'aide du plug-in Relay for Android Studio.

Ajouter des instances imbriquées et exposer les paramètres imbriqués

Vous pouvez ajouter des instances de package comme vous le feriez normalement pour ajouter des instances de composant dans Figma.

Une fois que vous avez ajouté une instance de package imbriqué à un package, vous pouvez ajouter des paramètres de contenu et d'interaction en fonction des paramètres d'instance imbriqués, comme les propriétés de toute autre couche:

• Sélectionnez la couche d'instance empaquetée.
• Cliquez sur + Ajouter un paramètre dans l'interface de Relay for Figma.
• Sélectionnez l'un des paramètres de package imbriqués.

Le composant parent expose le paramètre ou l'interaction sélectionnés, ce qui crée une connexion entre le paramètre de package imbriqué et un nouveau paramètre ajouté au composant parent. Dans le code généré, vous pouvez maintenant fournir une valeur au parent, qui est transmise à une instance du composant de code du package imbriqué.

Si l'instance imbriquée est présente dans plusieurs variantes Figma du composant parent, l'interface utilisateur regroupe les instances de variantes pour activer la configuration individuelle.

Par défaut, les paramètres d'instance de package imbriqués ne sont pas exposés par le composant parent. À la place, le code généré utilise la valeur que vous spécifiez dans Figma, tout comme les remplacements de paramètres standards.

Examinons cet exemple:

• Le package Chip contient un paramètre de texte, chip-text.
• Le package Description Card contient un package Chip. Ses paramètres sont les suivants :
  • title
  • subchip-text, qui expose le paramètre chip-text de l'instance Chip
  • sub-icon
  • details

• Le package Reservation Card contient un package Description Card. Ses paramètres sont les suivants :

  • hero-image

  • headline, qui expose le paramètre title de l'instance Description Card

  • reservation-text, qui expose le paramètre chip-text de l'instance Description Card

  • summary, qui expose le paramètre details de l'instance Description Card

Notez que sub-icon est le seul paramètre du package Description Card qui n'est pas exposé par le package Reservation Card. Par conséquent, chaque instance de Reservation Card utilise l'icône fournie par défaut par la Description Card.

Pour exposer un paramètre d'instance de composant imbriqué, procédez comme suit :

1. Sélectionnez une instance imbriquée d'un package d'interface utilisateur comportant des paramètres. Vous pouvez sélectionner l'instance directement dans le canevas ou dans le plug-in Relay for Figma sous Instances Relay.

2. Cliquez sur + à côté de Paramètres. Le menu affiche les paramètres de l'instance sélectionnée. Sélectionnez un paramètre.

   Un paramètre de l'instance imbriquée est alors exposé. Dans cet exemple, nous avons sélectionné l'instance Description Card et exposé le paramètre details.

   

3. Dans le volet situé à droite du plug-in Relay for Figma, vous pouvez sélectionner un autre paramètre ou le renommer pour modifier la façon dont il est appelé dans le code généré. Dans cet exemple, le paramètre est renommé summary, qui fait toujours référence au paramètre details de notre instance imbriquée.

   

Lorsque vous importez un composant parent (dans ce cas, Booking Card) dans Android Studio, tous les packages imbriqués sont importés automatiquement (dans ce cas, Description Card et Chip). Une fois le code généré, chaque package génère sa propre fonction modulable.

Le code généré pour l'exemple se présente comme suit :

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

Remplacer les propriétés de l'instance de package imbriquée

Si vous remplacez la valeur d'une propriété d'instance imbriquée dans Figma, la nouvelle valeur n'est traduite dans le code Compose que si le composant imbriqué a ajouté un paramètre pour cette propriété. Sinon, la nouvelle valeur est supprimée, et la valeur d'origine du composant imbriqué est utilisée dans le code.

Prenons cet exemple. Le composant Description Card possède une instance de composant Chip. Nous avons ajouté un forçage à l'instance Chip en remplaçant le texte "Chip Text" par "Reserve Required" (Réservation requise) :

Si Chip ne contient pas de paramètre pour son texte, alors dans le code généré, le chip de Description Card indique toujours "Chip Text" (Texte de puce) et non "Réservation requise".

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier
        // No parameter available to override the chip's text
    )
    ...
}

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

Si Chip comporte un paramètre pour son texte (par exemple, chip-text), DescriptionCard appelle Chip avec "Réservation requise" comme valeur du paramètre chipText dans le code généré:

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

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

Si la fiche de description expose le paramètre chip-text de la puce en tant que subchip-text, DescriptionCard comporte un paramètre subchipText et appelle Chip avec subchipText comme valeur du paramètre chipText:

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

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

De plus, maintenant que "Réservation requise" est la valeur d'un paramètre, il n'apparaît dans le code généré que dans l'aperçu de DescriptionCard.

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

Limites

• Le composant imbriqué ayant les mêmes propriétés de variante que le composant parent ne peut pas être compilé.
• La mise à jour de ressources en dehors de ui-packages ne force pas une nouvelle compilation