内容参数

在实现时,大多数组件的内容并不是静态的,而是会根据提供给组件的数据而变化。为了在设计中体现这一点,您可以使用内容参数。通过内容参数,您可以指定设计的哪个部分包含数据,而无需对实际数据进行硬编码。

插件中的 Title 参数

添加内容参数

  1. 在 Figma 文件中,选择相应组件并打开 Relay for Figma 插件 (Plugins > Relay for Figma)。

    已选择 Hello 卡片的 Figma 插件
  2. 在 Figma 主窗口中,通过 + 点击(在 Mac 上)或 Ctrl + 点击(在 Windows 上)选择 Title 图层。然后,在插件中,点击“Parameters”旁边的 + 号,并选择 text-content 为图层添加参数。

    Figma 插件中的参数选择菜单
  3. 如需更改 Title 文本内容参数的名称,请在 Name 中输入相应名称。在本教程中,我们输入 Title

    Figma 插件中的参数详情

    除了修改名称之外,您还可以选择不同的属性类型,也可以添加说明以在代码中生成注解。请与您的开发者合作,共同确定最合适的命名方案。内容参数的名称会转换为已生成可组合项中的参数的名称。

保存已命名的版本

现在,将此版本标记为准备就绪,以便导入代码中。

  1. 打开 Figma Relay 插件(如果尚未打开)。
  2. 点击与开发者分享
  3. 与开发者分享屏幕上,输入该版本的名称和说明。

    标题示例:Hello World Card V3

    示例说明:添加的参数

在 Android Studio 中更新组件

让我们在 Android Studio 中更新该组件。

  1. 在 Android Studio 中,确保“Project”工具窗口位于 Android 视图 中。 然后右键点击 app/ui-packages/hello_card/,并点击 Update UI Package

    上下文菜单中的“Update UI Package”选项
  2. 点击 “Make Project”按钮 以再次构建您的项目。

    工具栏中的“Build”按钮

    如果打开 app/java/com/example/hellofigma/hellocard/HelloCard.kt,您会发现添加了一个参数:title。该参数的名称就是我们在 Figma 中指定的内容参数的名称:

    Figma 和已生成代码中的 Title 参数
  3. 打开 app/java/com/example/hellofigma/MainActivity.kt

  4. 更改 MainActivity 类中的一行代码,为 title 参数添加值:

    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                HelloFigmaTheme {
                    // A surface container using the 'background' color from the theme
                    Surface(color = MaterialTheme.colors.background) {
                        HelloCard(title="Balloon World!") // Change this line
                    }
                }
            }
        }
    }
    
  5. 在同一个文件中,向下找到可组合项的预览,更改一行代码:

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        HelloFigmaTheme {
            HelloCard(title="Balloon World!") // Change this line
        }
    }
    
  6. 再次构建您的项目,然后在预览中查看更新后的组件!请注意,新的参数值现在可见。

    更新了文本样式的 Hello 卡片的预览
  7. 运行应用即可在模拟器中查看相同的更新。

    太棒了!您已经学习了 Relay 工作流程的基础知识。

后续步骤

基本教程到此结束。您已经了解了 Relay 工作流的许多功能,但 Relay 还提供了一些其他功能。如果您有兴趣了解如何使用互动处理程序等功能,以及如何使用具有多个 Figma 变体的组件等,请阅读高级教程