子参数

对于任何 Figma 帧、组或组件层,均可使用一个内容参数为其添加注解,以表明其子项是动态的。可以采用这种方式来设计容器组件,或者在设计中创建槽位,以供应用代码注入自定义组件。

如需向帧或组添加子参数,请在 Figma 中选择相应层,然后点击“Parameters”旁边的 + 按钮,并从菜单中选择 children

Figma 中的子参数

将界面软件包导入 Android Studio 后,该参数即会显示在生成的 @Composable 函数签名中,其类型为 @Composable RelayContainerScope.() -> Unit(在本例中,名为 customGraphic)。

@Composable
fun HelloCardWithCustomChild(
    modifier: Modifier = Modifier,
    customGraphic: @Composable RelayContainerScope.() -> Unit
) {
    TopLevel(modifier = modifier) {
        Image()
        CustomGraphic { customGraphic() }
        Title()
    }
}

@Preview 函数中,基于 Figma 文件产生的设计将用于填充相应槽位(在本例中,已设置 customGraphic 参数)。

预览中保留的 Figma 子元素
@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)
                )
            }
        )
    }
}

向层添加子参数还会对该层产生以下影响:

  • 之前添加到该层的任何 Relay 参数都不会显示在 Relay for Figma 插件界面中,而且这些参数在生成的代码中不可用。
  • 在生成的代码中,该层的内容在默认情况下不再呈现。它仅在预览中变成相应可组合项的内容。如果想让可组合项包含任何内容,开发者必须通过编写代码将内容传递到子参数中。