近期，关于 ProtoPie 团队协作的最佳实践以及如何提升协作效率的讨论日益增多。ProtoPie 与 Figma 相似，其优势（也是挑战所在）在于实现同一结果往往有多种方法。虽然这有助于快速开发，但也可能给团队协作带来挑战。

构建组件库是简化协作的关键一步。学习如何搭建结构良好、可复用的组件，是实现高效团队协作的核心技能。本教程将演示在 ProtoPie 库中构建可复用组件的一些最佳实践。

在本指南中，我将使用本地 Pie 中的组件作为示例。然而，在团队协作环境下，这些组件最好是构建在共享库中。这样一来，团队成员之间可以共享更新，确保所有 Pie 文件保持一致性。

为了简化概念并清晰地展示核心思想，我们将以一个简单的单选按钮作为例子。想象一下这样一个游戏，初始界面需要用户选择玩家（“玩家 1”或“玩家 2”）或难度级别（“简单”或“困难”）。

本教程的起始 Pie 文件正是基于这种设置，但所有内容都是硬编码的，并未考虑任何可复用性。如果你仔细检查文件，会立即发现巨大的可复用潜力，因为所有四个单选按钮的代码本质上是相同的。

要真正理解组件的价值，你可以尝试在起始 Pie 中添加第三个难度级别（例如“中等”）。你会发现这需要大量的修改，而且很容易遗漏细微的改动，从而导致原型损坏。此外，随着按钮数量的增加，场景中的触发器和响应列表会变得越来越拥挤，而这仅仅是为了让单选按钮工作，还未考虑它们输入后的交互。

一旦你确信组件的优势，我们就可以继续以下步骤。

首先，选择名为“Name Buttons”的容器，然后选择“创建组件”。将新组件重命名为“Radio Buttons”并开始编辑它。请确保容器层（Container Layer）的布局设置为“自动布局”（Auto Layout），并将其尺寸调整为“包裹内容”（Hug and Hug）。最后，将文本变量“Name”重命名为“Value”。

选中“Button 1”，然后复制它，并使用“粘贴并关联触发”（Paste with Linked Triggers）功能重复五次。这样你现在应该有六个单选按钮，图层名称分别为 Button 1 到 Button 6。

遍历组件内的所有图层，并精确地编辑图层名称。例如，“Button 4”中的“Label”字段应重命名为“Label 4”，而不是“Label 1”。

接下来，检查触发和响应的列表。修改其描述，使其准确反映每个触发和响应所需执行的操作。最好在编辑具体响应动作之前完成此步骤，这样能更容易地对照描述来检查每个动作。

现在，开始编辑具体的触发和响应动作。

为了实现可复用性，给“value”变量赋值时需要进行调整。不要直接使用“Player 1”这样的固定文本，而是应该使用像 Label 1.text 这样的表达式（即引用对应标签的文本内容）。

由于现在有六个按钮，你还需要确保当其中一个按钮被选中（开启）时，其他五个按钮是关闭的。这意味着，你需要将设置“On 2”不透明度为 0 的响应动作复制四次，以应用于新增的按钮。

预览该组件，以确保新增的按钮能够正确更新指示器。

我们需要一种方法，将更新后的值发送回主场景。为此，请为“value”变量添加一个触发器，并使用它向父级发送一条新消息（我们称之为 NEWVALUE）。请将“value”变量作为参数包含在此消息中。完成设置后，即可返回主场景。

回到主场景，删除旧的“Difficulty buttons”（难度按钮）容器。

将“Radio Buttons”（单选按钮）组件的一个新实例拖入场景中，并将此图层命名为“Difficulty buttons”（难度按钮）。

将场景中已有的那个实例重命名为“Name Buttons”。

向场景添加一个“接收”（Receive）触发器，用于监听来自子组件的 NEWVALUE 消息。

将其参数赋值给对应的变量。

然后，复制这个触发器，并为另一个子组件和另一个变量进行配置。

在“Name buttons”（名称按钮）实例中，确定您想要显示多少个玩家选项，然后隐藏其余的单选按钮。根据需要更改可见按钮的标签。对“Difficulty buttons”（难度按钮）组重复相同的过程。

现在，您应该拥有一个功能完善的原型，其中包含两组单选按钮。您可以预览这个 Pie 文件，并看到正确的值被赋值给了“Name”和“Difficulty”变量。虽然目前按钮标签是正确的，但我们将在下次教程中探讨进一步的自定义功能。

如果将我们最初的起点与最终成果进行比较，现在我们拥有一个场景，其中包含非常简单的触发器，以及一个强大的组件，可以根据需要提供任意两到六个单选按钮的集合。现在，添加第三组按钮也变得非常简单。

在下一次教程中，我们将进一步增强这个组件，增加以不同方式显示选中按钮的功能，甚至可能会融入不同的选择行为。