Jeder Frame-, Gruppen- oder Komponentenebene in Figma kann mit einem Inhaltsparameter annotiert werden, um anzugeben, dass seine untergeordneten Elemente dynamisch sind. Dies kann zum Entwerfen von Containerkomponenten oder zum Erstellen von Slots im Design verwendet werden, in die benutzerdefinierte Komponenten durch Anwendungscode eingeschleust werden können.
Wenn Sie einem Frame oder einer Gruppe einen untergeordneten Parameter hinzufügen möchten, wählen Sie den Layer in Figma aus, klicken Sie auf die Schaltfläche + neben „Parameters“ (Parameter) und wählen Sie children
aus dem Menü aus.
![Untergeordneter Parameter in Figma](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/children-parameters/child-parameter.png?authuser=6&hl=de)
Sobald das UI-Paket in Android Studio importiert wurde, wird der Parameter in der generierten @Composable
-Funktionssignatur vom Typ @Composable
RelayContainerScope.() -> Unit
(in diesem Fall customGraphic
) angezeigt.
@Composable
fun HelloCardWithCustomChild(
modifier: Modifier = Modifier,
customGraphic: @Composable RelayContainerScope.() -> Unit
) {
TopLevel(modifier = modifier) {
Image()
CustomGraphic { customGraphic() }
Title()
}
}
In der Funktion @Preview
wird die Anzeigenfläche mit dem Design aus der Figma-Datei ausgefüllt (in diesem Fall ist der Parameter customGraphic
festgelegt).
![Das untergeordnete Element in Figma, das in der Vorschau beibehalten wird,](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/children-parameters/childe-element-in-preview.png?authuser=6&hl=de)
@Preview(widthDp = 248, heightDp = 265)
@Composable
private fun HelloCardWithCustomChildPreview() {
MaterialTheme {
HelloCardWithCustomChild(
customGraphic = {
RelayText(
content = "Label",
fontSize = 16.0.sp,
fontFamily = montserrat,
color = Color(
alpha = 255,
red = 0,
green = 0,
blue = 0
),
textAlign = TextAlign.Left,
fontWeight = FontWeight(500.0.toInt())
)
RelayImage(
image = painterResource(
R.drawable.hello_card_with_custom_child_custom_graphic_still
),
contentScale = ContentScale.Crop,
modifier =
Modifier.requiredWidth(132.0.dp).requiredHeight(48.0.dp)
)
}
)
}
}
Das Hinzufügen eines untergeordneten Parameters zu einer Ebene wirkt sich auch folgendermaßen auf die Ebene aus:
- Relay-Parameter, die zuvor der Ebene hinzugefügt wurden, sind auf der Benutzeroberfläche des Relay for Figma-Plug-ins nicht sichtbar und auch nicht im generierten Code verfügbar.
- Im generierten Code wird der Inhalt der Ebene nicht mehr standardmäßig gerendert. Sie wird nur in der Vorschau zum Inhalt der entsprechenden zusammensetzbaren Funktion. Damit die zusammensetzbare Funktion beliebige Inhalte enthält, muss der Entwickler Code schreiben, um Inhalte an den untergeordneten Parameter zu übergeben.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Grundlagen zum Verfassen von Layouts
- Parameter hinzufügen
- Vorschau der UI mit zusammensetzbaren Vorschauen ansehen