使用组件和发送与接收功能在复选框表单中勾选项目

简介

复选框表单是 UI 设计中的一种输入元素，允许用户在一组选项中选择多个选项。一个复选框表单中可以嵌套多个复选框（子项）。用户可以勾选复选框来启用它，也可以取消勾选复选框来停用它。在 Protopie 中，使用组件和 Send & Receive 功能可以轻松实现这一效果。在本课中，我们将使用复选框组件，它包含两个条件触发器以及与每个触发器关联的不透明度响应。该组件还将使用Send & Receive 来勾选/取消勾选场景中的所有项目。

你将学到什么

1. 创建一个复选框组件

2. 在组件中添加 **Send & Receive **

3. 使用 Send & Receive 勾选所有项目

4. 使用 Send & Receive 取消勾选所有项目

5. 在变量中存储复选框状态

6. 全选项响应所有子项

最后，你将能够做出像这样的效果！

[起始 Pie 文件] [完成版 Pie 文件]

分步说明

1. 创建一个复选框组件

　1. 将未选中项制作成一个组件。然后把已选中项复制并粘贴到我们刚创建的组件中。

　组件是带有交互的图层集合，可在原型中重复使用。这可以避免不必要的重复工作并节省时间。你可以将由触发器和响应组成的复选框组件复制到场景中，并在需要时重复使用。

ctrl/command + c 复制，ctrl/command + v 粘贴

　2. 重命名图层，并将已选中图层的不透明度设置为0。

　我们需要确保在图层面板中，已选中图层位于未选中图层之上。我们只需控制最上层（已选中图层）的不透明度并将其打开或关闭（打开表示 100%，关闭表示 0%）。在默认状态下，项目应为未选中。由于已选中项位于未选中项之上，因此其默认不透明度应为 0%。

重命名图层，并将已选中图层的不透明度设为 0

　3. 为复选框添加一个 Tap 触发器。

　4. 添加一个条件，并将已选中项的不透明度设为 0。

　条件可以确保某些响应仅在对应条件满足时触发。这里必须使用条件，因为复选框有 2 种可能状态，并且它们彼此冲突。因此我们将使用两个不同的条件，每个条件都会触发一个特定响应。

条件表示进行逻辑判断（例如 =、<、>），并且仅在逻辑判断通过时触发响应

　5. 当已选中图层的不透明度 = 0 时，使用不透明度响应并将其不透明度值设为 100。

　当不透明度值设为 100 时，已选中图层会显示。因此点击复选框时，如果当前未选中，就会变为已选中。

　6. 当已选中图层的不透明度 = 100 时，使用不透明度响应并将其不透明度值设为 0。

　当不透明度值设为 0 时，已选中图层会消失。因此点击复选框时，如果当前已选中，就会取消选中。

2. 在组件中添加 Send

在组件中，我们需要同时启用 Send 和 Receive。

基本上，组件彼此之间以及与场景是隔离的。为了解决这个限制，我们需要使用 Send 和 Receive。了解更多。

我们需要确保复选框项目在被选中时发送checked消息，在取消选中时发送unchecked消息。还需要确保当任一子项被取消选中时，全选项也应取消选中。同样地，如果所有子项都被选中，全选项也应被选中。

　1. 在项目被选中的条件下添加一个 Send 响应。选择“Send to parent”，并设置一条消息。同时一起发送数值，数值可以是 1。该数值用于区分复选框项目的状态。我们使用1表示选中项目，使用0表示取消选中项目。作为用户，你也可以使用任何数字，只要在整个原型中保持一致即可。

　当我们有同一组件的多个实例时，使用Send to parent。这次我们会在场景中放置 4 个复选框组件实例，所以应使用“Send to parent”通道。

　这次我们还会在Send响应中同时发送数值。取消选中项目时发送 0，选中项目时发送 1。在主场景中，我们会用一些变量来接收这些消息。之后这些变量将用于条件检查，以实现全选项的逻辑。

使用 Send 响应时，我们始终可以选择是否同时发送一个值

**💡 **通道说明（发送给“谁”）

• ****Send to Parent：当没有父组件时，从组件向父组件或场景发送消息。

• Send to Child Component：从组件向子组件发送消息。

• Send to Current Scene：从组件向该组件所在场景发送消息。

• Send to Current Component：该通道允许你发送一条仅在组件内部传递的消息。

• 注意：当我们处理的是具有相同值的组件，或场景中只有一个组件时，可以改用 Send to Current Scene，这种情况下无需指定组件，消息会全局发送到场景。这次我们要使用Send to parent，因为场景中有同一组件的多个实例，并且我们希望知道消息来自哪个实例。

　2. 类似地，在项目被取消选中的条件下添加一个 Send 响应。这次将消息改为“unchecked”，并把值设为 0。

　这些值会发送到主场景并存储在变量中。变量用于保存复选框状态。1 表示复选框已选中，0 表示未选中。

3. 使用 Send & Receive 勾选所有项目

　1. 返回主场景。添加一个 Receive 触发器，用于接收来自全选项的消息。

　2. 当全选项收到名为checked的消息时，所有项目都应被选中。因此我们需要分别给每个项目添加一个 Send 响应，并发送名为checked的消息。

　Send to component通道使我们可以选择把消息发送到哪个组件实例。当全选项被选中时，我们需要确保所有子项同时被选中。全选项会响应该消息，并在被选中时勾选所有子项。

　3. 返回组件。添加一个 Receive 触发器以接收来自主场景的消息。当收到名为“checked”的消息时，将已选中组的不透明度设置为 100。

　现在如果我们勾选全选项，其余 3 个子项也会被勾选。

“Receive from parent”表示接收来自组件父级的消息；如果没有父组件，则接收来自主场景的消息。

4. 使用 Send & Receive 取消勾选所有项目

******回到主场景。**同样地，如果全选组件收到一个unchecked，它也会分别向每个项目发送一条 **unchecked **消息。

　1. 添加一个 Receive 触发器以接收来自全选项的消息。消息可设为unchecked。

　2. 当全选项收到名为unchecked的消息时，所有项目都应被选中。因此我们分别给每个项目添加一个 Send 响应，并发送名为unchecked的消息。

　3. 同样地，如果组件收到名为unchecked的消息，则将 **checked **组的不透明度设为 0。

　4. 在预览窗口中检查。现在如果我们取消勾选全选项，其余 3 个子项也会被取消勾选。

5. 在变量中存储复选框状态

为了让交互更完整，我们希望全选项能响应所有子项，即：

• 如果所有子项都被选中，全选项也应被选中

• 如果任一子项被取消选中，全选项也应被取消选中

要实现这一点，我们需要在主场景中知道哪些项目被选中、哪些没有。为此，我们需要使用变量把每个项目的状态存储为数值。

　1. 创建一个变量，用于存储随来自复选框 1 的消息一起发送的值。

　在创建变量时，我们可以创建“所有场景可用”或“仅本场景可用”的变量。这次两种都可以。

　要使用Receive触发器，只需在Add Trigger菜单中添加即可。对于每个Receive触发器，我们可以选择“接收”通道、接收来源的目标组件，并将一个值赋给变量。

　要将值存入变量，只需勾选Assign to Variable选项，并选择要赋值的变量。

将“checked”状态存储到变量“checkbox1”中

将“unchecked”状态存储到变量“checkbox1”中

　2. 使用相同的方法，我们可以应用到另外 2 个项目。总共需要 3 个变量和 6 个 receive 来存储勾选项状态。

选择多个 Trigger 时，可以按 ctrl/command + G 将这些 Trigger 分组

　3. 在预览窗口中检查。你会注意到每次勾选和取消勾选时变量值都会变化。如果任一子项被选中，对应复选框项目的变量值会更新为 1。

　4. 但是使用这种方法时，当我们尝试使用 **Today **项来全选或全不选时，变量中存储的值不会改变。为了解决这个问题，我们需要手动为每个变量赋值。

　5. 使用相同方法，我们必须分别为 3 个项目赋值。现在变量与状态一致了。

　6. 在预览窗口中检查。现在如果全选项被勾选，则所有子项都被勾选并返回值 1。如果全选项被取消勾选，则所有子项都被取消勾选并返回值 0。

6. 全选项响应所有子项

　1. 为了在任一子项取消选中时取消父项选中，我们可以在任一子项收到unchecked消息时向全选发送消息。

　这意味着只要我们取消勾选任一子项，全选项就会被取消勾选。为实现这一点，我们将让每个子项在被取消选中时都向全选项发送一条unchecked消息。

下面步骤将说明如何实现：

当所有子项都被选中时，全选项也会被选中。与“任一子项取消选中就取消全选”不同，我们会在任一子项状态发生变化时都检查一次是否所有子项都已选中。我们将使用Detect 触发器，这样每个子项都有机会触发全选项。为此，我们需要监控每个变量的值。我们将使用Detect 触发器来监控数值变化。（在Detect触发器中，当图层属性或变量发生变化时会激活响应。）

　1. 给变量checkbox1添加一个 **Detect **触发器。

　2. 添加一个条件：所有变量都等于 1。

　3. 向已选中项发送一条checked消息。

　4. 我们还需要重复该步骤 3 次，以应用到每个项目。

　当任一子复选框状态变量变化时，会检查 3 个子复选框状态变量是否都等于 1（即 3 个子复选框都已选中）。如果是，则需要发送一条消息去勾选全选复选框。

这三个触发器具有相同的响应，唯一的区别是 Detect 触发器的对象不同

　5. 在预览窗口中检查。你会注意到，当你勾选Today时，其下所有子项都会被选中。如果你取消勾选任一子项，那么Today也会取消选中。

恭喜！

太棒了！现在你已经学会了如何在复选框表单中勾选/取消勾选项目。

[这有帮助吗？告诉我们！]