在变量课程的第 1 部分中,我们通过一个非常简单的示例演示了变量的工作方式。现在让我们更进一步。
你需要准备
为了跟着本教程操作,请下载这个示例 Pie,并在 Studio 中打开:
你将学到什么
在本教程结束时,你将学会:
创建变量时“仅此场景”和“所有场景”的区别
当结果不符合预期时如何排查问题
使用变量的限制
完成时间:≤15 分钟
在另一个场景中使用变量
与其在用户点击 Next 时只显示名字,不如跳转到下一个场景,并给用户一个正式的问候。打开你上次保存进度的 Pie 文件。
更改 Tap 触发器的行为。移除 Text 响应(点击它并按键盘上的 Delete),然后添加一个 Jump 响应。

选择名为 protopie_welcome 的场景,并用你喜欢的任意过渡来配置 Jump。何不试试全新且超棒的 Smart Jump 过渡?(查看更多示例
。)

在场景面板中点击 protopie_welcome 场景以打开并编辑。

我们希望该界面在场景开始时按名字问候用户。添加一个 Start 触发器。

为名为 Name 的图层添加一个 Text 响应。在 Content 下选择 Formula。点击 Formula 下方的框以显示 ∫x 图标,并展开公式输入框。

在公式框中输入
"Hi, " + name + "!"。你可以使用我们上一课中探索过的相同技巧来插入变量。

注意 ProtoPie 用红色波浪线标出了“name”这个词吗?这是因为 ProtoPie 找不到此场景可用的名为“name”的变量。红色波浪线在处理变量和公式时非常有帮助。这是第一个提示,说明有地方需要修复。
如你很快会看到的,我们的问题出在别处。所以现在先点击 OK 提交你的公式。ProtoPie 会继续用琥珀色高亮你的公式,表示仍有问题需要修复。

如果你还记得,在我们的第一个示例中,我们创建了一个新变量并选择了 For This Scene。
这意味着我们创建的变量仅在创建它的场景中可用。我们希望变量能在多个场景中复用。因此创建变量时应该选择 For All Scenes。
让我们回去修复它。
在 Scenes 面板中点击 input 场景以打开编辑。然后点击左下角 Variables 面板中的 name 变量。你会注意到没有办法把它改成 For All Scenes 变量。这个选项只能在创建变量时选择。我们需要删除该变量并重新创建。
点击
+控件创建新变量。这次选择 **For All Scenes。**再次将新建变量重命名为 name.
💡 专业提示:复用与之前完全相同的名称。否则任何使用该变量的触发器和响应都会失效。

在右上角将变量类型配置为 Text。
为了让它生效,我们需要做的应该就这些。让我们再次预览。输入一个名字并点击 Next. 你应该会在后续场景中看到按名字的问候。

故障排查
如果没有像上面那样工作怎么办?以下是一些可帮助你定位问题的步骤。
查看触发器和响应上的琥珀色高亮,以及公式中的红色波浪线下划线。这些都清楚地表示有内容需要修复。

在这个例子中,我把变量名拼错了。ProtoPie 会给它加下划线,因为找不到名为 nme 的变量。
确认你的变量被设置为用于所有场景。变量名旁边的图标:
all-scene变量是实心,this-scene变量是空心。另外,all-scene变量会出现在所有场景的变量面板中,而this-scene变量只会出现在创建它的场景中。

如果你没有看到变量的预期值,可以开启它的 debug feature. 当你将鼠标悬停在变量面板中的变量上时,其右侧会出现一个瓢虫图标。点击它,场景中会出现一个绿色框(再次点击可关闭)。预览 Pie 时,它会显示变量的当前值。

你可以在场景中拖动这个绿色调试框,并将其放在方便的位置。

预览时你应当能看到变量值会随着输入而更新。

如果变量没有更新,请检查第一个场景中的 Detect 触发器,确保它设置为 Your name 文本图层的 text 属性。

还要检查 Assign 响应,确保其配置如下:

如果以上都正常,让我们切换到
second scene并确保我们正确使用了变量。你应该有一个 Start 触发器和一个按如下配置的 Text 响应:

如果你在两个场景之间使用了动画过渡,可能会在第二个场景中看到问候语出现前有非常短暂的延迟。如果出现这种情况,请查看 protopie_welcome 场景中的 Start 触发器。如果 Options for Multiple Scenes 设置为 Start After Jump,请改为 Start With Jump。这样 Start 触发器下的响应会在过渡动画开始时触发,而不是在动画完成后。

使用变量的限制
使用变量时,有一些注意事项需要了解。
我们已经讨论过设置正确的类型。如果类型与你要存储的信息不兼容,你会得到意料之外的结果。
我们也谈到了设置变量是仅用于一个场景还是用于所有场景的重要性。由于之后无法更改,提前明确你计划如何使用变量很重要。如果不确定,选择“For All Scenes”,因为它最灵活。
变量名不能包含空格。如果你有编程经验,这可能很明显;但对其他人来说,这是一个重要细节。若你尝试给变量取无效名称,ProtoPie 会提醒你。

如果你希望在变量名中使用多个单词以便更具描述性,可以使用几种常见约定。
使用下划线
-字符分隔多个单词。例如:first_name、shoe_lace_color。这有时称为 snake case 或 pothole case。将后续单词首字母大写。例如:
firstName、shoeLaceColor。这通常称为 camel case。
“Easy as “ + type_of_pie + “ Pie!”
现在你知道如何使用变量在 Pie 中存储一些信息。你也学会了如何在多个场景中使用同一个变量,并掌握了一些当结果不如预期时可用的实用排查技巧。
资源
在本教程视频中,你将了解 ProtoPie 中可用的内置变量,例如 $touchX、$touchY,以及如何在你的原型中使用它们。
在本教程视频中,学习如何在一个场景中将信息存入变量,然后在另一个场景中取出并使用。
使用 Masks 和 Chain 设计圆形滑块 通过控制旋钮,用户可以更改圆形滑块上的值,并看到对应百分比值的变化。
如何为桌面网页创建循环滚动轮播 学习如何使用滚动触发器、变量和条件为桌面网页创建循环滚动轮播。
使用组件计算购物车应付总金额 在本课中,你将学习如何使用步进器组件来计算电商应用中的应付总金额。





