在 Figma 中,变体用于将 相同的组件,例如不同的状态或尺寸。中继保留 组件在转换为代码后的各种变体在本部分中,我们将介绍 Relay 处理设计中的变体的方式。
起点
![包含树形变体的新闻卡片](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/design-variants/news-card-with-variants.png?authuser=7&hl=sk)
我们先来看一个包含 News Card 组件的 Figma 文件,其中 变体:
- hero-item,适用于最重要的新闻报道
- article-item 适用于典型报道
- audio-item 表示您聆听而不是阅读的文章
复制 Figma 示例
在本教程中,我们将使用一个现有 Figma 文件进行演示。确保您已登录 Figma 账号。
- 将 HelloNews.fig 下载到您的计算机。
在 Figma 中,前往文件浏览器。在左侧,将鼠标悬停在 草稿。系统会显示 + 图标 - 点击 + 图标,然后点击导入。 选择您刚刚下载的 HelloNews.fig 文件。这可能需要 从 10 秒到 1 分钟不等
在 Figma 中打开导入的文件。
创建界面软件包
Relay for Figma 插件可以为组件添加额外的信息,因此我们可以 与我们的开发者合作,这些开发者会在其代码中使用我们的组件。
- 在文件(在菜单栏中:Plugins > Relay)中打开 Relay for Figma 插件 (适用于 Figma)。点击开始使用。
选择该组件,然后点击 Create UI Package。
选择界面软件包后,向摘要框添加说明。对于 示例:“用于为列表显示新闻报道的新闻卡片组件”。
<ph type="x-smartling-placeholder"></ph>
保存已命名的版本
现在,您已经创建了界面软件包,接下来请准备您的组件,以便与开发团队共享它。
- 打开 Figma Relay 插件(如果尚未打开)。
- 点击与开发者分享。
- 在与开发者分享屏幕中,您可以在保存版本记录部分中输入新版本名称和说明。
点击 Save。
标题示例:初始新卡片
描述示例:新闻报道项目的首次迭代
下载 Android Studio 项目
对于本教程的 Android Studio 部分,我们将使用预配置的 Android Studio 项目中。此项目包含显示新闻报道的应用 生成纯文本格式的文件
- 下载示例 HelloNews.zip 文件。
- 双击以解压该文件,这将创建一个名为 HelloNews。将其移至主文件夹。
- 返回 Android Studio。转到文件 >打开,导航到您的住宅 文件夹中,选择 HelloNews,然后点击 Open。
- 当您打开该项目时,Android Studio 会询问您是否信任该项目。点击 Trust Project。
导入 Android Studio
我们将 Figma 组件导入项目中。
返回 Figma,复制 News Card 教程 Figma 文件的网址。我们将 使用此网址导入我们的组件。在 Figma,点击 Share 按钮。在打开的对话框中,点击 复制链接。
在 Android Studio 中切换到 HelloNews 项目。转到文件 >新建 >导入 UI Packages...。
粘贴 Figma 文件的网址,然后点击 Next。
<ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder"></ph> 的说明- 敬上
- 在文件完成提取(可能需要一些时间)后,点击 Finish。
点击
<ph type="x-smartling-placeholder">来构建自己的项目这可能需要一分钟左右。
</ph>
预览应用与组件
在 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