axure rp教程（二）数字调节效果

实现目标：

1、点击上箭头数字增加

2、点击下箭头数字减少

最终效果如下：

图1

这里用到了变量，当然用变量是一种实现方式，动态面板也能实现类似效果，只是不能够无限加减.

实现过程：

1、准备工作，拖一个文本框和两个矩形到画布。

2、修改矩形为上箭头

      在矩形上，点击鼠标右键，选择”编辑按钮图形“，再选择”选择图形“，再选择”向上三角形“。

3、修改矩形为下箭头

    在矩形上，点击鼠标右键，选择”编辑按钮图形“，再选择”选择图形“，再选择”向下三角形“。

4、调整箭头大小

     点中箭头，然后在工具栏中依次输入宽度和高度，如图2，同样调整另一个箭头。然后调整文本框和两个箭头的位置。

图2

5、文本框命名

      点中文本框，在其中输入1，然后在”部件属性“的标签中输入”数量“

6、设置向上前头的click事件

     6.1、 点中向上箭头，在”部件属性“的交互中鼠标双击”OnClick(点击时)“,出现图3

图3

       6.2、在图3中，点击”设置变量/部件值“，出现图4

图4

  6.3、在图4中，点击”打开设置值编辑器“，如图5

图5

    6.4、在图5中点击fx，如图6

图6

    6.5、定义局部变量。在图6中，点击”添加局部变量“，如图7

图7  变量名称为LVAR1，值为”数量部件的部件文字“

      6.6、定义结果。结果为局部变量的值加1，设置成图8

图8 在”插入变量或函数“组合框中选择变量LVAR1，然后在下面的文本框中输成[[LVAR1+1]]

依次点击确定，向上箭头制作完毕。

7、向下箭头的制作，依照向上箭头，可以制作减一的操作；但还有一种办法，首先选中向上箭头的OnClick事项下的用例进行copy，然后选中向下箭头的OnClick事项进行paste，再把算法修改。

8、向下箭头OnClick事项增加限制，只能减到0

     在向下箭头OnClick事项中,双击,然后点击"添加条件",设置成如图9

图9