在《局部变量的应用》中，我们一起制作了一个输入步进器。
在这篇教程中，我们一起来实现更加复杂的输入步进器。
当每次点击加号按钮时，项数会递增1。
当每次点击减号按钮时，项数会递减1。
当项数为1项时，减号按钮不可用，并变为灰色。
一、准备元件
1、一个矩形，宽度“300”像素，高度“45”像素，默认文字为“1 项”，并命名为“数量”，边框颜色为灰色，字号为“16”，文字的左边距为“10”像素。
2、两个圆角矩形，宽度“37”像素，高度“23”像素，边框颜色为蓝色，圆角半径为“5”像素，分别取消部分圆角。
3、两条水平线和一条垂直线，线段颜色为蓝色，长度为“13”像素。
温馨提示：如果样式设置有问题，请先学习《常用样式设置》。
4、将组成减号的圆角矩形和水平线全选，设置禁用时的交互样式，线段颜色为灰色。
温馨提示：如果不了解交互样式，请先学习《Axure的7种交互样式（4）-禁用的交互样式》。
5、将组成加减号的元件摆放好，分别组合后，命名为“加号”与“减号”。
6、将减号组合的禁用选项勾选，让它默认呈现灰色不可用状态。
另外，还要将加号组合置于顶层，以免出现加号缺少左边框的问题。
二、设置交互
1、加号[单击时]，要为[数量][设置文本]，文本的[值]是递增后的数值与“项”组成的字符串。
因为，“数量”元件中的文本并非纯数字，而是包含了汉字。所以，我们需要先将[目标]元件的[文本]中数字部分截取出来，加“1”后，再和“项”字连接。
字符串函数“slice()”能够进行文本截取，参数为截取的起始位置和终止位置，并且能够输入负数，负数表示从后往前的位置。
我们需要截取“数量”元件文字的第1位至倒数第2位，函数的参数为“0”和“-2”。
字符串的索引位置从0开始，所以，参数“0”表示第1个位置，“-2”表示倒数第2个位置，也就是“项”字前方的空格所在的位置。因为终止位置的字符是不会截取到的，所以能够仅截取到数字的部分。
完整的公式为：[[Target.text.slice(0,-2)+1]] 项
注意，公式中“项”字的前方有一个空格。
温馨提示：有人不清楚公式中的“Target.text”是什么意思。“Target”就是动作设置中所选择的目标元件，“text”就是元件上的文字。如果还是无法理解...那就放弃我吧。
2、加号[单击时]，项数会超过1项，此时应该[启用][减号]。
3、减号[单击时]，要为[数量][设置文本]，文本的[值]是递减后的数值与“项”组成的字符串。
这是减号要默认执行的动作。
但是，另外还有一种情形就是当完成递减后，项数为“1 项”时，要禁用减号按钮。
所以，我们需要[启用情形]，设置当前情形名称为“默认执行”。
因为是默认执行，这种情形不需要添加条件。
温馨提示：如果不了解情形的设置，请先学习《情形（条件）的设置》。
4、减号[单击时]的第2种情形。
点击[添加情形]按钮，为新的情形设置名为为“数量为1项时”，并添加对应的条件。
为这种情形添加符合条件时要执行的动作，[禁用][当前]按钮。
此时需要注意，设置的两种情形是“if...else”的关系。
而第1种“默认执行”的情形是无条件执行的情形，会导致第2种情形永远不会被执行。
所以，这两种情形之间不能存在逻辑关系。
我们在第二个情形名称上点击鼠标右键，菜单中选择“切换为[如果]或[否则]”，将“else if”转换为“if”。
这样，点击减号按钮时，就能够进行第2种情形的判断了。
通过此案例不难看出，当一个元件被禁用时，它的交互也会被禁用。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 输入步进器-升级版