嵌套包实例

A UI Package with nested
instances

UI 包可以包含（或“嵌套”）其他 UI 包的实例，并支持每个级别的动态内容和交互性——所有这些都使用 Android Studio 插件的 Relay 自动导入。

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

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

将嵌套包实例添加到包后，您可以根据嵌套实例参数添加内容和交互参数，就像任何其他图层的属性一样。

选择打包的实例层。
点击 Relay for Figma UI 中的+ 添加参数。
选择一个嵌套包参数。

所选参数或交互将由父组件公开，在嵌套包参数和添加到父组件的新参数之间形成连接。在生成的代码中，您现在可以为父组件提供一个值，该值将传递到嵌套包代码组件的实例。

如果嵌套实例存在于父组件中的多个 Figma 变体中，UI 将对变体实例进行分组以启用单独配置。

Grouping instances per
variant

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

Exposing nested instance parameters by their
parents

让我们看一下这个例子

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 默认提供的图标。

要公开嵌套组件实例的参数

选择具有参数的 UI 包的嵌套实例。您可以在画布上直接选择实例，也可以在 Relay for Figma 插件的Relay 实例下选择实例。
点击参数旁边的+。菜单将显示所选实例的参数。选择一个参数。

这将公开嵌套实例中的参数。在本例中，我们选择了Description Card 实例并公开了details 参数。
在 Relay for Figma 插件右侧的窗格中，您可以选择不同的参数，或重命名参数以更改其在生成的代码中的名称。在本例中，参数被重命名为summary，它仍然引用我们嵌套实例中的details 参数。

将父组件（在本例中为Reservation Card）导入 Android Studio 时，所有嵌套包都将自动导入（在本例中为Description Card 和Chip）。代码生成时，每个包都会生成自己的可组合函数。

UI Packages and generated
code

该例子的生成代码如下

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 component instance in the Description
Card

如果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 使用“Reservation Required”作为 chipText 参数的值调用 Chip。

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

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

如果Description Card 公开Chip 的chip-text 参数作为subchip-text，则在生成的代码中，DescriptionCard 将具有 subchipText 参数，并使用 subchipText 作为 chipText 参数的值调用 Chip。

@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)
            )
        }
    }
}

嵌套包实例

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

覆盖嵌套包实例的属性

限制

推荐给你