Untergeordnete Parameter

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.

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

@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.