在 Figma 中,变体用于将同一组件的不同变体(例如不同的状态或大小)组合在一起。Relay 会在组件转换为代码时保留其变体。在本部分中,我们将介绍 Relay 如何处理设计中的变体。
起点
![包含树变体的新闻卡片](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/design-variants/news-card-with-variants.png?authuser=5&hl=nb)
我们首先创建一个 Figma 文件,该文件包含一个 News Card 组件,该组件具有以下三个变体:
- hero-item 适用于最重要的新闻报道
- article-item 适用于典型报道
- audio-item 用于您收听而不是阅读的报道
复制 Figma 示例
在本教程中,我们将使用一个现有 Figma 文件进行演示。确保您已登录 Figma 账号。
- 将 HelloNews.fig 下载到您的计算机。
在 Figma 中,前往文件浏览器。在左侧,将光标悬停在“Drafts”(草稿)上。+ 图标 - 点击 + 图标,然后点击导入。 选择您刚刚下载的 HelloNews.fig 文件。这可能需要 10 秒到 1 分钟的时间。
在 Figma 中打开导入的文件。
创建界面软件包
Relay for Figma 插件会向我们的组件添加额外的信息,因此我们可以与将在其代码中使用该组件的开发者合作。
- 在文件中打开 Relay for Figma 插件(在菜单栏中依次选择 Plugins > Relay for Figma)。点击开始使用。
选择相应组件,然后点击 Create UI Package。
选择界面软件包后,向摘要框中添加说明。例如:“用于显示列表的新闻项的新闻卡片组件”。
保存已命名的版本
现在,您已经创建了界面软件包,接下来请准备您的组件以与开发团队共享。
- 打开 Figma Relay 插件(如果尚未打开)。
- 点击与开发者分享。
- 在与开发者分享屏幕中,您可以在保存版本记录部分输入新的版本名称和说明。
点击保存。
标题示例:初始新卡片
说明示例:新闻报道项目的第一次迭代
下载 Android Studio 项目
对于本教程的 Android Studio 部分,我们将使用预配置的 Android Studio 项目。此项目包含一个以纯文本格式显示新闻报道的应用。
- 下载示例 HelloNews.zip 文件。
- 双击该文件进行解压缩,这将创建一个名为“HelloNews”的文件夹。将其移至主文件夹。
- 返回 Android Studio。依次点击 File > Open,前往主文件夹,选择 HelloNews,然后点击 Open。
- 当您打开该项目时,Android Studio 会询问您是否信任该项目。点击 Trust Project。
导入 Android Studio
让我们将 Figma 组件导入项目中。
返回 Figma,复制 News Card 教程 Figma 文件的网址。我们将使用此网址导入组件。在 Figma 的右上角,点击 Share 按钮。在打开的对话框中,点击复制链接。
在 Android Studio 中切换到 HelloNews 项目。从 Android Studio 菜单栏中依次前往 File > New > Import UI Packages...。
粘贴 Figma 文件的网址,然后点击 Next。
- 文件提取完毕后(可能需要一些时间),点击 Finish。
点击
以构建您的项目。这可能需要一分钟左右。
预览应用和组件
在 Android 视图中,打开
app/java/com/example/hellonews/ui/home/HomeScreen.kt
,您将看到应用的预览,其中以纯文本格式显示几篇新闻报道,音频报道上方显示了印刷报道。打开
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
。这是为 Figma 组件生成的 Jetpack Compose 代码。在预览版中,我们可以看到 NewsCard 组件的三个变体已从 Figma 转换为代码。我们来详细了解一下代码。View
枚举允许我们选择要用于此组件的变体。枚举的名称及其值派生自 Figma 组件的变体。这用于 NewsCard 可组合项的view
参数。NewsCard 可组合项是从界面软件包生成的。它包含一个类型为
View
的参数,该参数用于设置要实例化的新闻卡片的变体。package com.example.myapplication.newscard import ... // Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list. * * This composable was generated from the UI Package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem ) {...}
后续步骤
我们尚未准备好使用 NewsCard。该组件不知道如何显示不同的新闻报道,只在 Figma 中显示同一个经过硬编码的新闻报道。因此,如果我们现在添加该组件,则只会得到相同的新闻报道。我们需要一种方法来指定 NewsCard 的哪些部分应该填充动态数据。
在本部分中,我们将向 NewsCard 组件添加内容参数。
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- 内容参数
- 滚动
- 在 View 中使用 Compose