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 denchip-text
-Parameter der Chip-Instanz verfügbar machtsub-icon
details
Das Reservierungskartenpaket enthält ein Beschreibungskartenpaket. Das Parameter sind:
hero-image
headline
, die dietitle
der Instanz der Beschreibungskarte verfügbar macht .reservation-text
, die das Ereignischip-text
-Parameter.summary
, die diedetails
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:
- 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.
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 .
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
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Komponenten vorhandenem Code zuordnen
- Inhaltsparameter
- Grundlagen des E-Mail-Layouts