Verschachtelte Paketinstanzen

Ein UI-Paket mit verschachtelten Instanzen

UI-Pakete können Instanzen anderer UI-Pakete enthalten (auch verschachteln) und unterstützen dynamische Inhalte und Interaktivität auf jeder Ebene. Alle werden automatisch mit dem Relay-Plug-in für Android Studio importiert.

Verschachtelte Instanzen hinzufügen und verschachtelte Parameter verfügbar machen

Paketinstanzen können wie gewohnt in Figma hinzugefügt werden.

Nachdem Sie einem Paket eine verschachtelte Paketinstanz hinzugefügt haben, können Sie Inhalts- und Interaktionsparameter auf Grundlage der verschachtelten Instanzparameter hinzufügen, genau wie die Eigenschaften jeder anderen Ebene:

  • Wählen Sie den Layer der gepackten Instanz aus.
  • Klicken Sie in der Relay for Figma-Benutzeroberfläche auf +.
  • Wählen Sie einen der verschachtelten Paketparameter aus.

Der ausgewählte Parameter oder die ausgewählte Interaktion wird von der übergeordneten Komponente verfügbar gemacht und stellt eine Verbindung zwischen dem verschachtelten Paketparameter und einem neuen Parameter her, der der übergeordneten Komponente hinzugefügt wurde. Im generierten Code kannst du jetzt einen Wert für das übergeordnete Element angeben, der an eine Instanz der Codekomponente des verschachtelten Pakets übergeben wird.

Wenn die verschachtelte Instanz in mehreren Figma-Varianten in der übergeordneten Komponente vorhanden ist, werden Varianteninstanzen in der UI gruppiert, um eine individuelle Konfiguration zu ermöglichen.

Instanzen pro Variante gruppieren

Standardmäßig werden verschachtelte Paketinstanzparameter von der übergeordneten Komponente nicht verfügbar gemacht. Stattdessen verwendet der generierte Code den in Figma angegebenen Wert, genau wie normale Parameterüberschreibungen.

Verschachtelte Instanzparameter durch ihre übergeordneten Elemente verfügbar machen

Sehen wir uns dieses Beispiel an:

  • Das Chip-Paket hat den Textparameter chip-text.
  • Das Beschreibungskartenpaket enthält ein Chip-Paket. Seine Parameter sind:
    • title
    • subchip-text, der den Parameter chip-text der Chip-Instanz verfügbar macht
    • sub-icon
    • details

  • Das Reservierungskarten-Paket enthält ein Beschreibungskartenpaket. Seine Parameter sind:

    • hero-image

    • headline: Damit wird der Parameter title der Beschreibungskarteninstanz verfügbar gemacht.

    • reservation-text, der den Parameter chip-text der Beschreibungskarteninstanz verfügbar macht.

    • summary: Damit wird der Parameter details der Beschreibungskarteninstanz verfügbar gemacht.

Beachten Sie, dass sub-icon der einzige Parameter der Beschreibungskarte ist, der von der Reservierungskarte nicht zur Verfügung gestellt wird. Daher wird für jede Instanz einer Reservierungskarte das standardmäßig auf der Beschreibungskarte enthaltene Symbol verwendet.

So machen Sie einen Parameter einer verschachtelten Komponenteninstanz verfügbar:

  1. Wählen Sie eine verschachtelte Instanz eines UI-Pakets mit Parametern aus. Sie können die Instanz direkt im Canvas oder im Relay für Figma-Plug-in unter Relay-Instanzen auswählen.

  2. Klicken Sie neben Parameter auf +. Im Menü werden die Parameter der ausgewählten Instanz angezeigt. Wählen Sie einen Parameter aus.

    Dadurch wird ein Parameter aus der verschachtelten Instanz verfügbar gemacht. In diesem Beispiel haben wir die Instanz Beschreibungskarte ausgewählt und den Parameter details offengelegt.

    Der Parameter „details“ der Beschreibungskarte wird verfügbar gemacht.

  3. Im Bereich auf der rechten Seite des Relay for Figma-Plug-ins können Sie einen anderen Parameter auswählen oder den Parameter umbenennen, um ihn im generierten Code zu ändern. In diesem Beispiel wird der Parameter in summary umbenannt, der sich weiterhin auf den Parameter details aus der verschachtelten Instanz bezieht.

    Umbenennung des Parameters „details“ in „summary“

Wenn Sie eine übergeordnete Komponente (in diesem Fall Reservierungskarte) in Android Studio importieren, werden alle verschachtelten Pakete automatisch importiert (in diesem Fall Beschreibungskarte und Chip). Wenn der Code generiert wird, generiert jedes Paket eine eigene zusammensetzbare Funktion.

UI-Pakete und generierten Code

Der generierte Code für das Beispiel sieht so aus:

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

Attribute der verschachtelten Paketinstanz überschreiben

Wenn Sie den Wert einer verschachtelten Instanzeigenschaft in Figma überschreiben, wird der neue Wert nur dann in Compose-Code übersetzt, wenn die verschachtelte Komponente einen Parameter für diese Eigenschaft hinzugefügt hat. Andernfalls wird der neue Wert gelöscht und der ursprüngliche Wert in der verschachtelten Komponente wird im Code verwendet.

Nehmen wir dieses Beispiel. Die Komponente Beschreibungskarte hat eine Instanz der Komponente Chip. Wir haben der Chip-Instanz eine Überschreibung hinzugefügt, indem wir den Text von „Chip Text“ in „Reservierung erforderlich“ geändert haben:

Instanz der Chip-Komponente auf der Beschreibungskarte

Wenn Chip keinen Parameter für seinen Text hat, wird im generierten Code auf dem Chip der Beschreibungskarte weiterhin "Chiptext" und nicht "Reservierung erforderlich" angezeigt.

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

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

Wenn Chip einen Parameter für seinen Text hat, z. B. chip-text, ruft DescriptionCard im generierten Code Chip mit „Reservierung erforderlich“ als Wert des chipText-Parameters auf:

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

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

Wenn die Beschreibungskarte den Parameter Chip's chip-text als subchip-text ausgibt, hat DescriptionCard im generierten Code den Parameter subchipText und ruft Chip mit subchipText als Wert des chipText-Parameters auf:

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

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

Da „Reservierung erforderlich“ jetzt der Wert eines Parameters ist, wird dieser jetzt im generierten Code nur in der Vorschau von „DescriptionCard“ angezeigt.

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

Einschränkungen