简介
图像是如今大多数数字产品中的强大资产。在强调图像的应用中，能够组织照片对用户体验至关重要。在本演示中，你将展示用户如何在保持数字顺序的同时选择和取消选择照片。本教程会引入一些顺序逻辑，这让它在思维上非常有挑战性！通过使用组件、变量和公式，你将能够掌握随机性，并为可选择和取消选择的照片建立秩序。
ProtoPie 通过使用组件让这件事更容易，因为你所做的更改会影响设计中所有相同的部分。使用组件可以加快你的工作流程！ProtoPie 还使用变量，这些变量携带的值在与公式配合时，能够对用户的交互（如选择和取消选择）作出反应。
你将学到什么
为每个组件实例设置一个特殊编号
当选择图像时，将每个复选框编号增加 1
让复选框在被选择时形成数字顺序
取消选择时将复选框编号减 1，并重新排序已选择的照片
最后，你将能够做出像这样的效果！
开始之前
你会注意到我们已经为你准备好了资源，帮助你快速开始。我们已将所有图像文件转换为组件，并启用了可带数字进行选择和取消选择的复选框。准备就绪，开始吧！
分步说明
1. 为每个组件实例分配唯一 ID
1. 在应用主场景视图中，进入图像组件。你将编辑这个组件，这会对应用中预先填充了该组件实例的所有地方产生更改。
2. 创建一个新的变量。你可以将其命名为 "ID"。你需要给每个组件一个唯一标识符来追踪它们分别是谁，这可以通过勾选Make Overridable（可覆盖）来实现。
3. 回到主场景，逐个选择组件并在 overrides（覆盖）框中将数字依次修改（1 到 8），从而为每个组件设置唯一编号（即唯一标识符）。如果你愿意，可以让编号与图像编号对应，但唯一要求是编号必须唯一。
2. 当选择图像时，将每个复选框编号增加 1
在这个原型中，每次你选择一张图像时，都希望数字增加 +1。我们将使用变量来控制图像上复选框中显示的文本。
1. 回到组件，在第一个条件下创建一个Send响应。在消息框中，可以将其命名为 "select"。
2. 添加一个Receive触发器，并选择你刚创建的 "select" 消息。
3. 创建一个新的变量并命名为 "order_of_selection"，表示该变量用于控制被选择时的顺序编号。
4. 在Receive触发器下，创建一个 Assign 响应并将其关联到你创建的新变量（order_of_selection）。在 Formula 中，选择order_of_selection变量，并在公式末尾加上 "+1"。
5. 在Receive触发器中添加一个Text响应，并将其指定到Number。将Content改为Formula，并插入你的 "order_of_selection" 变量。
6. 现在，如果你测试场景，你会注意到每次选择照片时，复选框的所有数字都会增加 1。在接下来的步骤中，我们会修正这一点，让每个数字根据后续选择正确反应。
3. 让复选框在被选择时形成数字顺序
我们需要发送一些信息，让组件的其他实例能够对我们的选择作出反应。
1. 在Tap触发器下的Send响应中，勾选Send Value Together，并将你创建的ID变量作为函数添加进去。
2. 在Receive触发器中，勾选Assign to Variable。此时我们需要将其保存到一个尚未创建的新变量中。
3. 创建一个新变量并命名为 "activated"。由于我们已为组件的所有实例设置了唯一 ID，这个变量能让 ProtoPie 识别每个唯一组件何时被激活。
4. 在 Receive 触发器中，将Assign to Variable功能改为你刚创建的 "activated" 变量。
5. 在Receive触发器的Text响应下，添加一个新条件并设置为 ID = activated。将 Text 响应移动到你刚创建的新条件下方。
💡 如果你现在测试场景，你可以选择一张照片，数字会按顺序逐个增加。如果你取消选择一个数字后再选择另一张照片，数字将不会正确响应，并且会乱序。我们将在下一步修复这个问题。
关于顺序逻辑的插曲
我们需要暂停一下，讨论有关数字重排的一点逻辑。假设你随机选择了五个组件。你会看到这些组件的数字框按 1,2,3,4,5 的顺序递增。当取消选择其中任意一个组件时，你希望其余数字通过减一来响应，但不能是随机变化。这些数字必须保持你选择它们时的顺序。
如果你随机选择组件后数字框变为 1,2,3,4,5，然后取消选择数字 3，会发生什么？4 会变成 3，5 会变成 4，但组件 1 和 2 保持不变。
这种复杂性被该应用设计流畅的用户界面所掩盖，但为了理解你在接下来的步骤中要实现的目标，这个思路是必要的。你要让数字减 1，并且让组件的数字顺序按逻辑重新组织。
4. 取消选择时将复选框编号减 1，并重新排序已选择的照片
1. 在组件中，位于Tap触发器下并在Color响应下方，创建一个Send响应。在消息中命名为 "deselect"，并勾选Send Value Together，使用 "ID" 变量。
2. 创建一个新的Receive触发器，将消息改为你创建的 "deselect"，并将变量指定为你的 "activated" 变量。
3. 在Receive触发器下创建一个Assign响应，并确保它关联到你的 "order_of_selection" 变量。在公式中应为 order_of_selection -1。
4. 复制 receive 触发器下的条件，并粘贴到该 receive 触发器下方。删除Text响应，并改为添加一个Send响应。消息可命名为 "reorder"，并勾选Send Value Together。完整公式应为 number('Number'.text)。
5. 添加一个Receive触发器，并在消息框中填入 "reorder"。勾选Assign to Variable，用于另一个我们需要创建的新变量。
6. 创建一个新变量并命名为 "number_of_deselected"。在你刚创建的Receive触发器中，将其设置为 "number_of_deselected"。
7. 在这个新的Receive触发器下添加一个condition。我们将使用刚才在Send响应中使用的同一公式，因此将该公式复制并粘贴到新条件中。选择 ">" 值，并将比较值改为 "number_of_deselected" 变量。条件将为 number('Number'.text) > number_of_deselected。
8. 在新条件下，添加一个关联到Number的Text响应。将内容改为公式。完整公式应为 number('Number'.text)-1。
恭喜！
说真的，这一节并不容易。你可能需要回过头再看一遍第四步，才能完全掌握你刚刚完成的技巧，但这是一点可以以有趣方式复用的逻辑魔法。继续前进，创造你自己的 ProtoPie 魔法吧（别忘了分享）！
