一对一映射

在本教程中，我们将使用 PlayBar 组件，该组件旨在以图形方式显示声谱。

我们将创建一个包含 PlayBar 的 PlaybackCard 组件。PlayBar 组件在代码中已有一个名为 MyPlayBar 的实现（一个可组合函数）。我们希望使用现有的实现，而不是通过 Figma 组件生成代码。为此，我们将设置从 Figma 中的软件包到代码组件的简单一对一映射。

下载示例项目

我们将使用在上一部分中下载的 HelloMapping 项目。如果您还没有下载该项目，请按照组件映射教程页面上的说明操作。

代码中的现有组件

1. 在 Android Studio 中，打开 com/example/helloMapping/MyPlayBar.kt。

   

   MyPlayBar 的签名如下所示。

   fun MyPlayBar(
       modifier: Modifier = Modifier,
       color: Color = Color(0xFFA697BF),
       numPeaks: Int = 8,
   )
   

2. 点击预览上方的 Start Interactive Mode 按钮。您可以看到条形动画效果。

   

   注意：如果您没有看到预览，请选择 Split view。

   

复制 Figma 示例

在本教程中，我们将使用一个现有 Figma 文件进行演示。确保您已登录 Figma 帐号。

1. 将 Figma 文件 1-to-1-Mapping.fig 下载到您的计算机。
2. 在 Figma 中，前往文件浏览器。在左侧，将鼠标悬停在 Drafts 上。系统会显示 + 图标，点击 + 图标，然后点击 Import 以导入您刚下载的 1-to-1-Mapping.fig 文件。

3. 在 Figma 中打开导入的文件。

   

Figma 中的打包组件

此文件有一个 PlayBar 组件和一个 PlaybackCard 组件。我们将在 PlaybackCard 中添加 PlayBar 组件的实例。请注意，此 PlayBar 在 Figma 中是静态的。它是一张图片，将被替换为代码中的实现。

1. 打开 Relay for Figma 插件。

2. 选择 PlayBar 组件，然后点击 Create UI Package。

   

3. 保持选中软件包，向摘要框添加说明，例如“用于显示声谱的 PlayBar 组件，会映射到 MyPlayBar”。

将设置好映射的组件放入卡片

让我们将此 PlayBar 组件的实例添加到 PlaybackCard 组件中。

1. 选中 PlaybackCard 组件，然后点击 Create UI Package。

   

2. 复制 PlayBar 的实例并将其放置到 Playbar-Container 图层下的卡片中。

   

编写映射文件

使用映射文件将 Figma 中的打包组件映射到可组合函数。

1. 找到 HelloMapping Android Studio 项目，然后选择 Project 视图。

   

2. 在 app/src/main/ 下，创建一个 ui-package-resources/mappings/ 目录。

3. 在 mappings/ 下，创建一个名为 play_bar.map 的文件。

   

   复制并粘贴以下代码，然后保存并关闭文件。此文件将告知代码生成器如何到达所需的可组合函数（在本例中为 com.example.hellomapping.MyPlayBar）。

   {
       "target": "MyPlayBar",
       "package": "com.example.hellomapping"
   }
   

注意：该文件的名称必须与 Figma 中界面软件包的相应名称一致。在本例中，该组件在 Figma 中的名称为 PlayBar，相应映射文件必须命名为 play_bar.map。在映射文件中，target 设为该组件所映射到的可组合函数的名称，package 设为该可组合函数所属的软件包的名称。

导入 Figma 中的设计

现在，让我们在代码中查看该组件！

注意：此部分与其他教程的相应部分完全相同。 如需了解详情，请参阅在 Android Studio 中将设计转换为代码。

1. 新增 Figma 文件的已命名版本。依次前往 File > Save to Version History，然后输入新版本的名称和说明（这里可输入任何标题和说明）。
2. 在 Figma 的右上角，点击 Share 按钮。在随即打开的对话框中，点击 Copy link。
3. 切换到 Android Studio 项目。从 Android Studio 菜单栏中依次前往 File > New > Import UI Packs…。
4. 粘贴 Figma 文件的网址，然后点击 Next。如果您使用的是 macOS 并看到了 Keychain Access 提示框，请输入您的密码并点击 Always Allow。
5. 等待下载文件完成。成功后，您应该会看到两个组件的预览：play_bar 和 playback_card。点击 Finish。
6. 点击主工具栏中的 以构建您的项目。这可能需要几分钟的时间。点击 Android Studio 底部的 Build 标签页以查看构建结果。

检查生成的代码

1. 在 Android 视图中，打开 app/java/com/example/hellomapping/playbackcard/PlaybackCard.kt，这是为 PlaybackCard Figma 组件生成的 Jetpack Compose 代码。您会看到导入的卡片的预览。

2. 如需确认此组件可正常运行，请点击预览上方的 Start Interactive Mode 按钮。您可以在卡片内部看到条形动画效果。

   

3. 在代码中，搜索 PlayBarInstance。您可以看到，PlayBar 嵌套实例已映射到 MyPlayBar。

   @Composable
   fun PlayBarInstance(modifier: Modifier = Modifier) {
       MyPlayBar(modifier = modifier)
   }
   

后续步骤

变体的映射

在下一个教程中，我们将使用 Figma 中的变体创建更高级的映射。