第8课：使用变量 I

ProtoPie 中最强大的功能之一，就是你可以在原型中使用变量。在本课中，我们将全面讲解变量——它是什么、如何使用，以及当你想使用变量时需要注意的一些特定事项。

你需要准备的内容

为了跟着本教程一起操作，请下载这个示例 pie 文件并在 Studio 中打开：

[使用变量的 Pie 文件]

你将学到什么

完成本教程后，你将学会：

• 什么是变量，以及为什么它被称为“变量”

• 在 ProtoPie 中，变量可以使用哪些数据类型

完成时间：≤10 分钟

什么是变量？

variable（变量）这个词是一个编程术语。它只是用于存储一小段信息的一种方式，比如名字、数字、颜色值等。你存储在变量中的内容可以改变——也就是会变化，因此才叫“变量”——具体取决于你的原型需求。比如，你可能在体验开始时把名字“Leah”存进一个叫“name”的变量里，但稍后又决定改为存储“Bern”。ProtoPie 允许你随时更改变量中存储的内容。

变量类型

在 ProtoPie 中创建变量时，你需要指定该变量将包含哪种类型的信息。ProtoPie 支持三种类型：

• Number - 整数或小数，例如：25、-403、3.14

• Text - 字母数字字符序列，例如：Jeff、40 Bay Street、auston@mapleleafs.com

• Color - 十六进制颜色值，例如：#FF0000

你选择的类型很重要。你只能用数值信息来设置或更新 Number 类型变量。同样，Text 类型也只能用文本信息来设置或更新。比如，你不能把 Jeff 赋给 Number 类型变量——Jeff 不是数字。因此，在创建变量时，你需要留意希望在变量中存储哪种信息。

💡 专业提示：如果你想进行数学运算或计数，那么 Number 类型最合适。对于任何文本信息——姓名、地址、邮箱等——请使用 Text 类型变量。如果你想存储颜色值（例如设计系统的颜色板），请使用 Color 类型变量。

你可以在 Pie 中创建任意数量的变量。所以如果你既需要一个变量存数字又需要一个变量存文本，可以分别为它们创建独立变量。

一个简单示例

看一下示例 Pie。在第一个场景中，我们有一个表单，要求用户输入他们的名字。还有一个名为 Simple greeting 的空文本图层。我们将创建一个变量，用来存储用户在 Your name 图层中输入的内容；当用户点击 Next 时，我们会在 Simple greeting 文本图层中显示该变量的值。

• 在 Studio 界面左下角找到 Variables 面板。默认情况下它很可能是折叠的。点击一次以展开面板。

• 点击 + 图标创建一个新变量。你会看到两个选项：

• For All Scenes

• For This Scene

• 我们稍后会演示这两个选项的区别。

现在先选择 For This Scene。

• ProtoPie 会创建一个名为 variable1 的变量。这个名字对于我们的用途不够直观，所以给它改个更有意义的名字。由于我们会用它来存储用户姓名，就把变量命名为 “name”。双击 variable1 并将其重命名为 name。

• 现在来使用这个变量。我们希望检测用户在 Your name 文本框中输入的内容，并把 name 变量的值设置为输入内容。

• 为 Your name 文本图层创建一个 Detect 触发器。

• 选择 Text 属性，作为我们要监测变化的属性。

• 添加一个 Assign 响应。当我们想更新变量——也就是赋值一个新值——时，就使用 Assign 响应。

• 在 Select Variable 下拉菜单中，选择你刚创建的变量 name。

• 每当你给变量赋新值时，都需要通过 Formula 来完成。你在 Formula 框中指定的内容，就是被赋给变量的值。如果你还不清楚什么是 Formula，请先查看上一课 高级功能 - Formula 基础。 点击 Formula 框以显示 **∫x ** 图标。

• 在 Formula 输入框中，点击 ⊕ 图标并选择名为 Your name 的图层。输入 . 字符以列出该图层的所有属性。向下滚动并选择 Text。点击 OK。

这个过程的最后一步，是在用户点击 Next 时显示 name 变量的值。

• 为 Next button 图层创建一个 Tap 触发器。

• 为 Simple greeting 图层添加一个 Text 响应。

在 Content 下选择 Formula。

• 点击 Formula 下方的框以显示 ∫x 图标并展开 Formula 输入框。在 Formula 输入框中输入 name，然后点击 OK。

让我们预览一下。在输入框中键入你的名字，然后点击 Next。

发生了什么？你是看到自己的名字出现在 “Next” 按钮下方，还是看到了 "0"？

在上面的说明中，我故意跳过了一个步骤，因为我想演示当变量类型设置错误时会发生什么。现在我们来修复这个问题。

• 在 Variables 面板中点击 name 变量。

• 现在请看右上角。你可以在这里设置变量的类型。

• 默认情况下，ProtoPie 在创建新变量时会选择 Number。当我们在 Your name 文本框中输入姓名时，输入的是文本，这与 Number 类型不兼容。请将类型改为 Text。

在这个控件中你也可以设置初始值。就本例而言，我们不需要初始值，所以保持为空即可。但在你未来的项目中，可能会有一些场景需要变量在体验开始时就具有特定值。这个框就是用来设置它的。

我们再预览一次。

现在我们的体验应该可以正常工作了。让我们在下一课中更进一步。到时见！

[需要更多技巧？告诉我们！]