国庆假期结束了，protopie也在这期间更新了3.9.1的版本，新加入了表达式/变量和键盘还有回车等功能！所以今天写了一个小教程带大家来看看这个新功能！

当然你想了解更多可以前往官方查看！本期教程的源文件会在文章最后提供给大家！

1.前期准备

本期教程将模仿淘宝购物车的里面的商品加减交互来探索protopie的新功能！大家也可以自己打开淘宝啊什么的购物网站看看！

首先我们需要简单分析一下：

1.我们点击加减按钮时，输入框的值会变化

2.我们点击输入框输入0时，会有错误提示

3.输入框数量为1时点击减按钮，这个时候也会有一个错误提示

4.点击输入框会有一个弹窗修改数量（这个本教程不会讲，大家可以自己思考下怎么做）

5.这里要用到表达式和输入框，变量。

官方基础教程 （表达式变量等基础教程这里有介绍，大家可以前往查看）

第一步

素材的制作：XD PS AI Sketch都可以（我这里用XD，因为XD和sketch都是很好的支持protopie）

第二步

将制作好的素材导入到protopie里面（ctrl+ALT+E）然后他会自动打开你的protopie，在弹出的地方我们可以保持默认设置。

第三步

我们可以打开预览窗口检查一下我们的素材，然后就可以根据上面的分析开始制作交互所需要的其他东西！

1.1设置变量

点击变量，在展开的变量区域（层）后面点击加号，添加一个变量并且命名为number（名称可以是英文或者是拼音但不能是中文字符）

提示：这里添加变量的两种方式都可以，本教程使用第二种（仅适用于当前场景）可以根据实际情况变换使用。

设置变量的类型为数字，默认值为1

1.2添加输入文本框

点击文本工具，选择输入。然后选择输入框在属性栏里面讲默认文本设置为1，键盘类型设置为数字，回车设置为完成。

键盘类型是指点击输入框时设备默认唤出的输入法状态。回车-完成的意思敲击输入法回车时完成什么动作。

然后我们把输入框位置移动到数字显示区域，然后设置文本居中对齐，字体颜色黑色！

1.3添加一个提示语

点击文本添加一个默认文本，将位置移动到加减数量的下方，然后输入“最小只能输入1哦”字号可以设置为10，颜色可以改为红色！可以提前复制一份命名为提示语2.后面会用到。

然后我们将其透明度改为0，当然你可以为这个文本重命名为提示语！

ok，到这里基本上准备工作OK了，你们我们现在来制作效果吧！

2.输入数值的效果

步骤1

首先我们要给我们的变量一个监听，在监听下面加入一个文本，参数设置如下图！

步骤2

接着我们给输入框一个监听。因为输入框我们是要输入东西的，所以我们需要有一个条，那就是如果我们输入了一个数值为零，那么提示语就会出现，然后输入框的值变回默认值1.

提示：选择表达式后点击输入框后面的加号就可以选择性输入表达式！

添加一个文本，将其设置如下图（这一步的意思就是说，只要满足上面的条件，那么输入框的数字就会是变量number的值）

步骤3

假如我们输入的值大于0，那么输入框就读取我们输入值为最后确定值。

再添加一个文本，设置如下图(当满足了上面的条件，输入框的值就会是输入的值）

步骤4

我们可以在条件1的下面添加2个透明度来制作当输入0时的错误提示！

第一个设置提示语的透明度为100，第二个设置为0，具体参数如图！

好了，你可以预览一下他了，当然用手机预览很直观，你也可以用电脑预览，直接用键盘输入就好了！

提示：提示语这个步骤你可以事先做，也可以后面加，但是切记得是，他所执行的顺序是按这个层顺序来的，所以后面加记得放到相应的顺序哦！

3.按键制作加减法效果

步骤1

选择减法按钮，添加单击。然后我们需要做的是给他一个赋值的动作，赋值给谁？当然是我们的输入框！

那么，我们输入框的值大于1的时候怎么办？等于1的时候是不是我们就不能再减了？所以我们这里还是需要添加条件！

首先第一一种情况！大于1的时候！

参数如图设置，至于为什么这里的表达式变了，是因为我们的输入框此时此刻是阔以输入负数的，还有表达式预设里面没有判断输入框是否输入的是数值还是文本，然后文本是不能与数值做减法的，所以在这里我取这个输入框的文本的绝对值去减去1。切记表达式一定要在英文输入状态下输入！

步骤2

然后我们的减法做好了，假如等于1的情况下我们点击减法按钮会怎么样？会没有反应，所以我们给一个提示好了，这个时候需要一个条件！（就是输入框的值等于1的时候出现提示语）参数如下图：

步骤3

减法做了我们开始做加法，加法就很简单了对吧，毕竟减法都做了。选择加法按钮添加单击动作，然后加入文本，参数如图！

这个时候我们可以连接手机预览效果了

好了教程到这里就结束啦！谢谢大家！别忘了练习下哦！下期见！