最近有一些关于在 ProtoPie 中进行团队协作以及可能有哪些最佳实践的讨论。ProtoPie 的一个优点（也是缺点）与 Figma 很像，即通常有多种方式可以实现相同结果。虽然这有利于快速开发，但也会给团队协作带来挑战。
开发组件库是简化协作的关键一步。学习构建结构良好、可复用的组件，是高效团队协作的一项核心技能。本教程将演示在 ProtoPie 库中构建可复用组件的一些最佳实践。
在本指南中，我将使用本地 pie 内的组件。不过，对于团队协作来说，理想情况下这些组件应构建在共享库中。这样更新就可以在团队中共享，从而确保所有 pies 的一致性。
为保持简单并让核心概念更清晰，我将以朴素的单选按钮作为示例。设想一个游戏的初始界面，用户必须选择玩家（“Player 1”或“Player 2”）或难度级别（“Easy”或“Hard”）。
本教程的起始 Pie 已经有了完全相同的设置，但全部是硬编码，没有考虑复用性。如果你查看该文件，会立刻看到复用的潜力，因为四个单选按钮的代码本质上是相同的。
要真正理解组件的价值，试着在起始 pie 中添加第三个难度级别（“Moderate”）。你会发现这需要大量修改，而且很容易漏掉一个小改动并破坏原型。此外，随着你添加更多按钮，场景中的触发器和响应列表会越来越拥挤，而这还只是让单选按钮工作起来，更不用说那些对其输入作出反应的交互了。
一旦你认同这些好处，我们就可以继续以下步骤。
第 1 步：创建组件
选择名为“Name Buttons”的容器并选择 Create Component。将组件重命名为“Radio Buttons”，然后开始编辑它。确保容器图层设置为 Auto Layout（Hug 和 Hug）。最后，将文本变量“Name”的名称改为“Value”。
创建组件
第 2 步：复制按钮
选择“Button 1”，复制它，然后使用五次“Paste with Linked Triggers”。现在你应该有六个单选按钮，图层名称从 Button 1 到 Button 6。
复制按钮
第 3 步：重命名图层
检查组件内所有图层，并将图层名称改为准确名称。例如，“Button 4”中的“Label”字段应重命名为“Label 4”，而不是“Label 1”。
重命名图层
第 4 步：更新触发器和响应
接下来，查看触发器和响应列表。修改描述，使其准确反映每一项需要执行的操作。最好在编辑响应之前先做这一步，因为这样更容易根据描述逐项检查每个动作。
第 5 步：编辑触发器和响应
现在，编辑实际的触发器和响应。将标签赋值给“value”变量这一部分需要调整以实现可复用性。不要使用“Player 1”，而应使用像‘Label 1’.text 这样的表达式。由于有六个按钮，你还需要确保当一个按钮打开时，另外五个按钮关闭。这意味着将“On 2”的不透明度设置为 0 的响应需要为其余按钮再复制四次。
修改响应
第 6 步：预览组件
预览组件，确保新按钮会更新正确的指示器。
第 7 步：发送更新后的值
我们需要一种方式将更新后的值发送回主场景。为此，给“value”变量添加一个触发器，并用它向父级发送一条新消息（我们称之为 NEWVALUE）。在这条消息中将“value”变量作为参数包含进去。设置完成后，你就可以返回场景。
添加发送值
第 8 步：更新场景
回到主场景，删除旧的“Difficulty buttons”容器。
移除不必要的图层
将“Radio Buttons”组件的新实例拖入场景，并将此图层命名为“Difficulty buttons”。
添加另一个实例
已存在的那个实例应重命名为“Name Buttons”。
重命名标签
第 9 步：接收来自组件的消息
在场景中添加一个 Receive 触发器，以监听来自子组件的 NEWVALUE 消息。
添加接收触发器
将其参数赋给相应的变量。
添加变量
然后，复制这个触发器，并将其配置为另一个子组件和另一个变量。
复制接收触发器
第 10 步：最终配置
在“Name buttons”实例中，决定你想要多少个玩家选项，并隐藏其余的单选按钮。根据需要更改可见按钮的标签。对“Difficulty buttons”这一组重复此过程。
隐藏图层并重命名标签
现在你应该有一个可运行的原型，其中包含两组单选按钮。你可以预览该 pie，并看到正确的值被赋给“Name”和“Difficulty”变量。虽然按钮标签现在已经正确，但我们将在下一次继续探索更多自定义。
结论
如果将我们的起点与最终结果进行比较，你会发现现在我们拥有一个触发器非常简洁的场景，以及一个强大的组件，能够按需提供任意 2-6 个单选按钮。现在添加第三组按钮也变得很直接。
在下一篇教程中，我们会进一步增强这个组件，加入以不同方式显示已选按钮的能力，甚至可能纳入不同的选择行为。
视频教程
如需更深入的指南，请查看 David Gilmore 的这段视频演示中的完整操作流程： ProtoPie 可复用组件教程第 1 部分
