快速概述
在转账应用设计中，你经常会看到一种交互：用户输入一些数字——例如，他们想转给朋友的金额——然后界面会将该金额按货币格式回显，例如 $45.33。
在本课中，你将学习如何使用 ProtoPie 的一个内置函数，将数字输入以常见货币格式呈现。
你将学到什么
在本课中你将学习：
完成时间：≤10 分钟
开始之前
打开起始 Pie，其中包含一个模拟支付应用的单个界面。我们将使用用户输入要发送给联系人的金额的那个界面。我们只希望用户输入数字。例如，如果用户输入 5，我们的交互应将其解释为 5 美分，并显示为 $0.05。如果用户输入 50，我们将显示 $0.50。如果用户输入 505，我们将显示 $5.05，以此类推。最后，我们希望在用户输入时实时更新显示。
分步操作
第 1 部分：设置输入
我们需要一种方式来捕获用户输入。
在画布中添加一个输入图层。暂时将它放在“Transfer amount”图层和“Continue”按钮之间即可。
保留图层默认名称
Input 1。我们稍后会将其隐藏，所以先不用担心尺寸、字体、颜色等。
如果你现在预览，会看到点击输入框时弹出的是普通字母键盘。
我们来把它改成显示数字键盘。
在画布中选中输入框后，滚动右侧属性面板到底部，找到“Keyboard Options”部分。
在“Type”下拉菜单中，你可以选择字段聚焦时出现的键盘。选择“Number”。
现在预览时，你会看到点击输入框会弹出数字键盘。
我们希望场景开始时键盘自动出现。
添加一个 Start 触发器。
当 Input 图层获得焦点时键盘会出现。在 Start 触发器下，为
Input 1图层添加一个 Focus 响应，并确保选择“Focus In”。
再次预览。场景开始时 Input 1 图层应处于聚焦状态，从而触发键盘出现。不过，如果你点击 Input 图层外部，它会失去焦点，键盘会消失。我们希望键盘始终保持在屏幕上，因此需要进一步配置，确保 Input 图层不会意外失焦。
再次滚动到 Input 的属性底部，找到“Focus Out Options”
取消勾选“Tap Return Key”
取消勾选“Tap outside of Input Layer”
再次预览。现在你会看到无论点击哪里，Input 图层都会保持聚焦，键盘也会始终显示在屏幕上。
第 2 部分：将输入格式化后显示
我们希望在用户输入时实时更新显示。
为 Input 图层添加一个 Detect 触发器，并将其设置为检测
Input 1的 Text 属性变化。
💡 复习：Detect 触发器会在所选对象属性或所选变量值每次发生变化时都会触发。
现在来显示输入内容！
在 Detect 触发器下添加一个 Text 响应。
选择
Transfer amount图层。在 Content 下选择“Formula”
继续之前，我们先看看 ProtoPie 的 format() 函数，它允许你按特定方式展示数字信息。例如可添加千位分隔符，并将数字显示为指定小数位。它接收两个参数：
value - 你希望格式化的原始数字——在本例中是用户输入的内容
format - 表示你希望如何格式化该数字的模式。
它看起来是这样：
format(value:NUMBER,format:TEXT)
format 参数最多由四种关键字符组成：
#用于表示格式中的整数部分0用于表示格式中的小数部分小数字符（例如北美使用
.）分隔符字符（例如用
,作为千位分隔符）
我们来看一些示例：
format(1234.567, "#")将输出1235。格式中未指定小数位，因此只得到整数。注意输出是四舍五入后的结果。format(1234.567, "#,###")将输出1,235。这指定了分隔符字符，连续三个#表示该分隔符将作为千位分隔符使用。format(1234.567, "#,##")将输出12,35。与上面类似，不同之处在于分隔符后只有连续 2 个#，因此它作为百位分隔符。format(1234.567, "#,###.00")将输出1,234.57。这会将.设为小数字符并保留两位小数。注意输出会四舍五入到最接近的百分位。format(1234.567, "#.###,00")输出1.234,57。这与上面的格式相同，但.用作分隔符，,用作小数字符。这是在欧洲及世界其他地区常见的数字格式。
💡 最后一个示例展示了 format() 函数如何用于针对特定受众进行本地化。
在我们的案例中，我们将使用北美“美元+美分”格式，如下所示：
$1,234.57
上面的第四个示例给出了该格式中的数字部分。我们需要在公式中单独拼接 $ 字符。来看实际效果！
在刚创建的 Text 响应中，使用以下公式：
"$" + format(Input 1.text, "#,###.00")
💡 这里发生了什么：
每当你处理未知——或动态——信息时，都需要使用公式来用动态信息“填空”。在我们的例子中，我们不知道用户会输入什么。因此，不像示例里那样使用明确数字，我们将 Input 1 图层的 text 属性作为 format 函数的第一个参数传入。ProtoPie 会在执行公式时将其替换为实际输入内容。
另外请注意，我们把 $ 字符添加到了输出开头。我们用 + 字符把两段文本——美元符号和格式化后的数字——连接在一起。如果你想使用其他货币符号，例如 € 或 £，将公式中的 $ 替换为所需符号即可。
来预览一下！我们几乎达到了想要的效果，但注意无论输入什么，你得到的都只是整美元金额，小数点右侧没有美分。
这是因为我们传入的输入始终是整数。我们希望 ProtoPie 将上述输入解释为 123.45，而不是 12345。因此需要在 format 处理前，用一些基础数学把输入除以 100。
按如下方式修改公式：
"$" + format(``Input 1``.text / 100, "#,###.00")
💡 由于标准键盘上没有 ÷ 键，程序员很早就约定在计算中使用 / 字符表示除法。同样，* 用于乘法。
再预览一次。现在我们的格式化应当已经完全正常工作了！
最后做一点收尾：把 Input 输入框隐藏起来。你可以有几种做法。可以将图层不透明度设为 0——这样完全可行——但在这种场景下，我更倾向于保持图层可见但移到屏幕外。这样可提醒我或未来需要编辑这个 Pie 的其他人：这个交互包含一个隐藏的输入图层。
数字格式化……像 Pie 一样简单！
在本课中，你学习了如何使用 ProtoPie 灵活的 format() 函数，将数字输入正确显示为货币金额。你还学习了如何使用设备原生键盘，在隐藏字段中捕获用户输入。
想了解更多？
技巧与窍门：使用变量和公式创建打字机效果
技巧与窍门：使用公式和变量创建秒表计时器
