Verschachtelte Paketinstanzen

UI-Pakete können Instanzen anderer UI-Pakete enthalten (oder „verschachteln“), mit Unterstützung. für dynamische Inhalte und Interaktivität auf jeder Ebene – alles automatisch importiert mit dem Relay for Android Studio-Plug-in.

Verschachtelte Instanzen hinzufügen und verschachtelte Parameter freigeben

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

Nachdem Sie einem Paket eine verschachtelte Paketinstanz hinzugefügt haben, können Sie Inhalte und Interaktionsparameter, die auf den verschachtelten Instanzparametern basieren, Eigenschaften jeder anderen Ebene:

• Wählen Sie die Ebene der gepackten Instanz aus.
• Klicken Sie in der Relay for Figma-Benutzeroberfläche auf den Parameter + zum Hinzufügen.
• Wählen Sie einen der verschachtelten Paketparameter aus.

Der ausgewählte Parameter oder die ausgewählte Interaktion wird von der übergeordneten Komponente Herstellen einer Verbindung zwischen dem verschachtelten Paketparameter und einem neuen Parameter der übergeordneten Komponente hinzugefügt wurde. Im generierten Code können Sie nun ein an das übergeordnete Element, das an eine Instanz der verschachtelten der Codekomponente des Pakets.

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

Standardmäßig werden verschachtelte Paketinstanzparameter nicht vom übergeordneten Element Komponente. Stattdessen verwendet der generierte Code den Wert, den Sie in Figma angegeben haben, wie reguläre Parameterüberschreibungen.

Sehen wir uns dieses Beispiel an:

• Das Chip-Paket hat den Textparameter chip-text.
• Das Description Card-Paket enthält ein Chippaket. Die Parameter sind: <ph type="x-smartling-placeholder">
  </ph>
  • title
  • subchip-text, die den chip-text-Parameter der Chip-Instanz verfügbar macht
  • sub-icon
  • details

• Das Reservierungskartenpaket enthält ein Beschreibungskartenpaket. Das Parameter sind:

  • hero-image

  • headline, die die title der Instanz der Beschreibungskarte verfügbar macht .

  • reservation-text, die das Ereignis chip-text-Parameter.

  • summary, die die details der Instanz der Beschreibungskarte verfügbar macht .

sub-icon ist der einzige Parameter der Beschreibungskarte, der nicht der Reservierungskarte angezeigt wird. Daher wird jede Instanz einer Reservierungskarte verwendet das Symbol, das standardmäßig auf der Beschreibungskarte angezeigt wird.

So stellen Sie einen Parameter einer verschachtelten Komponenteninstanz bereit:

1. Wählen Sie eine verschachtelte Instanz eines UI-Pakets mit Parametern aus. Sie können auswählen, direkt im Canvas oder im Plug-in „Relay for Figma“ unter Relay-Instanzen.

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

   Dadurch wird ein Parameter aus der verschachtelten Instanz verfügbar gemacht. In diesem Beispiel haben wir die Instanz Description Card ausgewählt und die Details .

   

3. Im Bereich auf der rechten Seite des Relay for Figma-Plug-ins können Sie oder benennen Sie den Parameter um, um zu ändern, wie er in den generierten Code. In diesem Beispiel wird der Parameter in summary, die sich weiterhin auf den Parameter details aus dem verschachtelten Instanz.

   

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

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 wird im Compose-Code nur dann übersetzt, wenn der verschachtelten Komponente ein Parameter für diese Property. 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 Description Card (Beschreibungskarte) hat einen Chip. Komponenteninstanz. Wir haben der Chip-Instanz eine Überschreibung hinzugefügt, indem wir Text aus „Chip Text“ auf "Reservierung erforderlich":

Wenn der Chip keinen Parameter für den Text hat, wird im generierten Code der Auf dem Chip der Beschreibungskarte steht weiterhin „Chip-Text“ und nicht „Reservierung erforderlich“.

@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 den Text hat, z. B. chip-text, ist in generierter Code, DescriptionCard ruft Chip mit „Reservierung erforderlich“ auf als Wert des Parameters chipText:

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

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

Wenn die Description Card (Beschreibungskarte) den Parameter Chip's chip-text als subchip-text enthält, hat DescriptionCard im generierten Code einen subchipText und ruft Chip mit subchipText als Wert von chipText auf. Parameter:

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

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

Da "Reservierung erforderlich" ist der Wert eines Parameters, erscheint im generierten Code nur in der Vorschau von „DescriptionCard“.

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

Beschränkungen

• Verschachtelte Komponenten mit denselben Varianteneigenschaften wie die übergeordnete Komponente kompilieren
• Bei der Aktualisierung von Ressourcen außerhalb von ui-Paketen wird kein neuer Build erzwungen