功能介绍

ProtoPie 可复用组件创建指南 - 第二部分

学习如何从单个元素创建强大、可扩展的单选按钮组件，减少代码量并优化你的原型设计工作流程。

ProtoPie

July 11, 2025

在 ProtoPie 中创建可复用组件
在第一部分中，我们构建了一个可复用的单选按钮组件。虽然它很有用，但仍然需要大量代码，微小改动就容易出错，并且最多只能限制为六个按钮。
这次，我们将升级方法。我们将从单个单选按钮创建一个高效组件，它可以用来构建任意大小的按钮组。这种方法能大幅减少代码量，并让你的组件更强大、更灵活。
在开始教程之前，理解几个重要概念对于顺利学习至关重要：

JSON 结构

ProtoPie 消息一次只能发送一个值。我们将使用 JSON 来打包多个值到一个消息中，从而发送更复杂的信息。

可覆盖变量 (Overridable Variables)

把它们想象成组件实例的自定义属性。它们允许我们给每个单选按钮一个独特的身份和功能，使我们的单个组件真正实现可复用。

ProtoPie 和 Figma 中的覆盖 (Overrides)

为了保持 Figma 和 ProtoPie 之间的同步，你必须注意覆盖什么。ProtoPie 中的覆盖总会覆盖 Figma 中的更改。 一般来说，避免在 ProtoPie 中更改图形属性（形状、颜色、边框、字体、位置）。最好在 Figma 中管理这些属性，或者在 ProtoPie 中通过响应“开始 (Start)”触发器来更改它们。虽然文本值和不透明度可以在 ProtoPie 中更改，但通常还是通过触发器来完成更好。

不透明度 vs. 隐藏图层

ProtoPie 没有“隐藏”图层的响应，但你可以更改它的不透明度。关键是，没有办法检查一个图层是否被隐藏，只能访问它的不透明度。请记住，即使不透明度为 100%，图层也可能在图层面板中被隐藏（因此不可见）。你可以在 ProtoPie Studio 中删除或隐藏 Figma 导入的图层而不会破坏同步，但这必须通过图层面板操作，而不是通过交互实现。
准备好构建一个更智能、更具扩展性的组件了吗？让我们深入探讨吧。

构建一个通用的单选按钮

前提条件

要跟随本教程，你可以下载起始 Pie 文件和 Figma 文件，最终的 Pie 文件也可以在这里下载。

步骤 1：初始设置

打开“Starting Pie.pie”文件。如果你无法访问 Figma，请直接跳到步骤 3。
第一步：初始设置
初始界面

步骤 2: 导入并准备 Figma 素材(仅限拥有 Figma 访问权限的用户)

删除“Starting Pie.pie”文件中存在的本地组件，并将“tutorial.fig”文件导入 Figma。你应该会看到两个单选按钮设计：一个叫做“Tick”（勾选），一个叫做“Dot”（圆点）。同时选中这两个设计，然后打开 ProtoPie Figma 插件。将这两个对象导出到 ProtoPie（确保插件显示正在导出 2 个对象）。
回到 ProtoPie 后，将 Tick 和 Dot 的位置设置为 0,0，并将组件重命名为“Radio Buttons”。展开 Tick 和 Dot 中的图层，并确保它们都是可编辑的（如果不是，请点击“Make Editable”）。此时，最好也将“ON”层的不透明度设置为 0，这样就只显示未选择的按钮了。
步骤 2a
从 Figma 导入到 ProtoPie
步骤二
确保导入的图层可编辑

步骤 3: 创建组件变量

打开 Radio Buttons 组件的组件编辑器。我们现在将创建必要的变量：
  1. 添加一个名为 ‘LABEL’ 的可覆盖文本变量。我们使用全大写字母来表示可覆盖变量。
  2. 添加另一个名为 ‘SET’ 的可覆盖文本变量。
  3. 添加一个名为 ‘value’ 的文本变量。公式定义的变量不使用大写字母。在其中输入公式 regexreplace(LABEL," ","")。这使得你的单选按钮可以在 UI 显示中包含空格，但内部值不含空格（这会避免在使用 JSON 时出现问题）。
  4. 添加一个名为 ‘parameters’ 的文本变量，其定义公式为 "{\"Set\":\""+Set+"\", \"Value\":\""+Value + "\"}"。
  5. 最后，添加一个名为 ‘sender’ 的文本变量。当发送消息时，此变量将用于接收值。
创建组件变量
为触发器和响应准备可编辑图层和变量

步骤 4：在启动时填充标签

现在你可以将代码添加到组件中。首先，你需要一个“启动”触发器来用相应的标签填充各种潜在的文本字段。对于组件中每个应显示按钮标签的文本字段，添加一个文本响应以将变量“LABEL”放入该字段。
在启动时填充标签
步骤 4：'启动'触发器及其响应

步骤 5：创建“轻触”触发器

主要所需的代码是对“轻触”（Tap）触发器的响应；当组件被轻触时，使用必要的动作来打开按钮。在最基本的层面上，这可能涉及将任何“ON”图层的不透明度设置为 100，并将“OFF”图层的不透明度设置为 0。
除了打开按钮之外，您还需要向整个场景发送一条消息，以指示已选择“NEWVALUE”，并将其值作为变量参数传递。
创建“轻触”触发器。
步骤 5：关键的轻触触发器及其响应

步骤 6：处理传入值

组件需要接收“NEWVALUE”消息。如果选择了另一个按钮实例，则此实例需要关闭自己。为此，请为“NEWVALUE”添加一个“接收”（receive）触发器，并将附加值分配给变量“sender”。现在我们可以使用 parseJson 函数来检查“sender”是否在同一集合中但具有不同的值，在这种情况下，我们将其关闭（反转“轻触”触发器中的“ON”操作）。
处理传入值
步骤 6：'接收'触发器及其响应

步骤 7：在场景中分配值

现在你可以切换回场景来使用新的组件。你需要在场景中为“NEWVALUE”消息创建一个“接收”（receive）触发器，它也会将附加的参数分配给一个名为 sender 的变量。然后，对于每个可能的集合，你检查 sender 是否在该集合中，如果是，则将该值存储在相应的变量中。这段代码需要针对你想要创建的每个单选按钮集合进行手动更新。
在场景中分配值

步骤 8：构建按钮组

要使用这个“饼图”组件，请将组件的多个实例拖入场景中，并为每个实例指定其独有的 LABEL 以及所属的 SET。你还需要创建一个变量来存储该组的当前值。一个组可以包含任意数量的按钮，但每个按钮必须具有不同的 LABEL 和相同的 SET。
每个单选按钮仍会同时显示“勾选”和“点”两种变体。因此，在每个SET中，你还需要隐藏所有“勾选”或“点”版本。
构建按钮组
步骤 8：在每个按钮组中隐藏一个变体并为每个按钮分配 LABEL 和 SET

步骤 9：同步设计更改

现在你可以回到 Figma 来优化单选按钮的视觉设计，调整颜色、字体、间距或对齐方式。当你准备好后，只需将更新后的画板重新导入到你的 ProtoPie 组件中。
只要你没有直接在 ProtoPie 中修改那些属性，它们就会自动更新以匹配你的 Figma 设计。你的交互应该会继续完美运行。
如果样式没有更新怎么办？ 如果你不小心在 ProtoPie 中更改了某个属性（例如，“勾选”或“点”的颜色），它将不再与 Figma 同步。要解决这个问题，请删除组件中已修改的图层，从 Figma 重新导入干净的对象，然后将新图层重新链接到任何正在使用它的响应中。
专业提示： 为了在不破坏 Figma 链接的情况下在 ProtoPie 中试验更改，请使用“开始”（Start）触发器应用它们。这种基于代码的方法仅在原型运行时覆盖 Figma 样式，从而保持组件结构的整洁。

在接下来的更新中...

下一个教程将把 Figma 故事更进一步，解释如何在 ProtoPie 团队库中，从 Figma 设计系统创建可重用的组件。这样一来，一个团队成员可以在 Figma 中进行更改，更新 ProtoPie 库，然后所有基于该库构建的原型都将自动适应新的设计系统，无需任何重新编码。