介绍
计数器（在 iOS 设计中也称为步进器）是最常用的 UI 元素之一。步进器通常用于电商网站中更新购物车数量。当用户将商品加入购物车后，他始终可以使用计数器增加/减少购物车中的商品数量。商品数量会反映用户应支付的总金额。本课将介绍如何使用计数器来更新最终应支付的购物车金额。
ProtoPie 结合步进器组件、发送/接收功能、变量和公式来实现这一点。
你将学到什么
将交互转换为组件
将组件值发送到场景
在场景中接收来自组件的值并将其分配给变量
使用公式计算应支付总金额
最后，你将能够做出类似这样的效果！
开始之前
你可以通过上方链接了解更多关于创建输入步进器的内容。
在开始本教程之前，请确保计数器数字和应支付总金额都已转换为可编辑文本图层（如果是从 Figma/Sketch 导入）。我们将使用变量和算术公式来计算应支付总金额，这将在分步说明中进一步解释。
分步说明
1. 将交互转换为组件
选择Stepper，然后点击工具栏中的Component图标，将你创建的交互转换为组件。
组件是带有交互的图层集合，可在原型中重复使用。这可以避免不必要的重复工作并节省时间。在此场景中，你可以创建步进器组件，并在购物车页面复制其实例。
然后在主场景中复制Stepper 组件，并将其放置到每个商品对应的位置。
Alt/Option + 拖拽可复制对象。
2. 将组件值发送到主组件
Detect 用于在检测值发生变化时触发响应。
在本例中，我们希望每次文本变化时都触发响应。因此，让我们在Number图层上添加一个Detect触发器。在属性中，将面板设置为检测其Text属性。
在这种情况下，我们希望每当Text发生变化时都有响应。
当你希望某个变化引发另一个变化时，“Detect” 很有用。
2. 在Detect触发器内添加一个Send响应。每次文本变化时，都会触发Send。
在通道部分选择Send to Parent。并为你的消息命名。
由于我们的主场景包含处理不同数值的Stepper组件实例，我们将使用Send to Parent并指定接收消息的组件来源，以计算与该组件实例关联的具体金额
💡 通道说明（发送给“谁”）
Send to Parent：当没有父组件时，将消息从组件发送到父组件或场景。
Send to Child Component：将消息从组件发送到子组件。
Send to Current Scene：将消息从组件发送到使用该组件的场景。
Send to Current Component：该通道允许你发送仅保留在组件内部的消息。
当我们处理具有相同值的组件，或场景中只有一个组件时，可以改用Send to Current Scene。在这种情况下，我们不需要指定组件，消息会全局发送到该场景。
3. 勾选Send value together，将值与消息一起发送。使用公式获取其值。这里使用的公式是 number('Number'.text)。该公式可将Number对象的文本转换为数字，稍后我们会用到它。
在“Send”中，是否发送值是可选的。这次我们选择发送。
4. 返回主场景并创建一个变量。在属性面板中将变量初始值设为 1，以确保变量数值与文本数字一致。
💡 创建新变量时，我们可以选择For all scenes或For this scene。在本场景中两者都可行。但如果还有其他场景也要使用这些变量，请选择For all scenes。
这个变量用于记录第一个步进器的数量。
5. 你可以勾选bug 图标，在预览窗口中显示变量。这样你就能确保变量存储的是正确的值。
处理变量时，bug 图标非常有用。
6. 添加一个Receive响应。在属性面板中选择Receive from Component，并在下拉菜单中选择Stepper 1。
你可以勾选 bug 图标，在预览窗口中显示变量。
7. 勾选Assign to Variable，并选择你要赋值的变量。这样variable1就会与步进器上的数字关联。
8. 当你在主场景中与步进器交互时，变量会随着你的交互而变化。
当你在主场景中与步进器交互时，变量会随着你的交互而变化。
9. 使用相同方法，现在你可以将所有组件的值分别存储到变量中。再创建两个变量来完成此操作。
如果你想更改变量名称，双击它即可。
3. 使用公式计算总金额
选择Total payment文本图层，然后在每个接收触发器下添加一个文本响应。
现在你可以将所有组件的值分别存储到变量中
2. 在内容部分选择Formula。
这里使用的公式是："$" + stepper1*60 + stepper2*23 + stepper3*12.99
该公式会计算总支付金额，并在数值前加上$符号。
在公式中，使用引号来包裹文本内容。
3. 将相同的响应添加到每个触发器
当制作多个具有相似功能的对象时，使用带有 send & receive 的组件！
恭喜！
就是这样。现在你已经知道如何使用组件来更新电商应用中的购物车了。
这个用例教程对你有帮助吗？欢迎参与这份 1 分钟问卷 来帮助我们改进教学内容。
