嵌套软件包实例

包含嵌套实例的界面软件包

界面软件包可以包含(或“嵌套”)其他界面软件包的实例,并支持每个级别的动态内容和互动功能 - 所有软件包均使用 Relay for Android Studio 插件自动导入。

添加嵌套实例并公开嵌套参数

您可以像平常在 Figma 中添加组件实例一样添加软件包实例。

将嵌套软件包实例添加到软件包后,您可以根据嵌套的实例参数添加内容和互动参数,就像添加任何其他层的属性一样:

  • 选择已打包的实例层。
  • 点击 Relay for Figma 界面中的 + 以添加参数。
  • 选择一个嵌套软件包参数。

选定的参数或互动通过父组件公开,从而在嵌套的软件包参数与添加到父组件的新参数之间建立连接。在生成的代码中,您现在可以向父级提供一个值,该值会传递到嵌套软件包代码组件的实例。

如果嵌套实例存在于父组件的多个 Figma 变体中,界面会将变体实例分组以启用单独的配置。

按变体对实例进行分组

默认情况下,父组件不会公开嵌套软件包实例参数。相反,生成的代码会使用您在 Figma 中指定的值,就像常规的参数替换一样。

通过父级公开嵌套实例参数

我们来看一下这个示例:

  • Chip 软件包有一个文本参数 chip-text
  • Description Card 软件包中包含 Chip 软件包。其参数为:
    • title
    • subchip-text,用于公开 Chip 实例的 chip-text 参数
    • sub-icon
    • details
  • Reservation Card 软件包包含 Description Card 软件包。其参数为:

    • hero-image
    • headline,用于公开 Description Card 实例的 title 参数。

    • reservation-text,用于公开 Description Card 实例的 chip-text 参数。

    • summary,用于公开 Description Card 实例的 details 参数。

请注意,sub-icon 是 Description Card 中唯一未由 Reservation Card 公开的参数。因此,默认情况下,Reservation Card 的每个实例都使用 Description Card 提供的图标。

如需公开嵌套组件实例的参数,请执行以下操作:

  1. 选择包含参数的界面软件包的嵌套实例。您可以直接在画布中选择该实例,也可以在 Relay for Figma 插件中的 Relay instances 下选择该实例。
  2. 点击 Parameters 旁边的 +。该菜单会显示所选实例的参数。选择一个参数。

    这样将公开嵌套实例的参数。在此示例中,我们选择了 Description Card 实例并公开了 details 参数。

    公开说明卡片的详情参数

  3. 在 Relay for Figma 插件右侧的窗格中,您可以选择其他参数,也可以重命名该参数,以更改它在生成的代码中的调用方式。在此示例中,该参数已重命名为 summary,它仍会引用嵌套实例中的 details 参数。

    将“details”参数重命名为“summary”

将父组件(在本例中为 Reservation Card)导入 Android Studio 时,系统会自动导入所有嵌套的软件包(在本例中为 Description CardChip)。生成代码时,每个软件包都会生成自己的可组合函数。

界面软件包和生成的代码

为示例生成的代码如下所示:

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

替换嵌套软件包实例的属性

如果您在 Figma 中替换嵌套实例属性的值,则仅当嵌套组件为该属性添加了参数时,系统才会在 Compose 代码中转换新值。否则,新值会被丢弃,而嵌套组件中的原始值会用于在代码中。

我们来看一下这个示例。Description Card 组件有一个 Chip 组件实例。通过将文本从“Chip Text”更改为“Reservation required”,为 Chip 实例添加了替换项:

说明卡片中的条状标签组件实例

如果 Chip 没有文本参数,那么在生成的代码中,Description Card 的条状标签仍然显示“Chip Text”,而不是“Reservation required”。

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier
        // No parameter available to override the chip's text
    )
    ...
}

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

如果 Chip 确实有文本参数(例如 chip-text),则在生成的代码中,DescriptionCard 会调用 Chip,并将“Reservation required”作为 chipText 参数的值:

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

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

如果 Description CardChip 的 chip-text 参数公开为 subchip-text,那么在生成的代码中,DescriptionCard 具有 subchipText 参数,并调用 Chip,并将 subchipText 作为 chipText 参数的值:

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

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

此外,由于“Reservation required”是参数的值,因此它仅在 DescriptionCard 预览中显示于生成的代码中。

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

限制