界面软件包可以包含(或“嵌套”)其他界面软件包的实例,并支持每个级别的动态内容和互动功能 - 所有软件包均使用 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 提供的图标。
如需公开嵌套组件实例的参数,请执行以下操作:
- 选择包含参数的界面软件包的嵌套实例。您可以直接在画布中选择该实例,也可以在 Relay for Figma 插件中的 Relay instances 下选择该实例。
点击 Parameters 旁边的 +。该菜单会显示所选实例的参数。选择一个参数。
这样将公开嵌套实例的参数。在此示例中,我们选择了 Description Card 实例并公开了 details 参数。
在 Relay for Figma 插件右侧的窗格中,您可以选择其他参数,也可以重命名该参数,以更改它在生成的代码中的调用方式。在此示例中,该参数已重命名为 summary,它仍会引用嵌套实例中的 details 参数。
将父组件(在本例中为 Reservation Card)导入 Android Studio 时,系统会自动导入所有嵌套的软件包(在本例中为 Description Card 和 Chip)。生成代码时,每个软件包都会生成自己的可组合函数。
为示例生成的代码如下所示:
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 Card 将 Chip 的 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)
)
}
}
}
限制
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- 将组件映射到现有代码
- 内容参数
- Compose 布局基础知识