Axure RP 9 中继器原理——添加行

我们在画原型图的时候，前面有几个输入框，下方有个表格，输入框输入数据，点击提交，表格就会添加一行，那么如何实现中继器添加行呢？

每提交一次数据，每增加一行

步骤：

1、打开Axure RP 9，新建文件。

2、在元件库中，拖动“文本框文件”

拖入文本框

3、拖入“文本标签”，并将文字改为“商品名称：”；拖入“水平线”，对齐“文本框”底部。

拖入文本标签、水平线

4、选中“文本框”，将字号设置为14，线段设置为0，“交互”下面的“提示文本”输入“输入商品名称”。设置好后，选中全部CTRL+G，组合。

设置相关属性 组合

5、选中该组合。CTRL+C、CTRL+V复制粘贴两次，将文本标签分别修改为“商品数量：”、“商品价格”，提示文本分别修改为“输入商品数量”、“输入商品价格”。

复制，修改

6、拖入一个“按钮”，并将文字改为“提交”。

拖入按钮

7、拖入一个矩形，尽量覆盖所有的元件，如下图。选中矩形，移动左上角的倒三角，可以将直角改为圆角，点击上方的“底层”，将矩形置于底层。

拖入矩形

8、拖入一个中继器，选中该中继器，在右边“样式”下方添加列，并修改列名称：name、sale、number，如下图：

拖入中继器

9、选中中继器，鼠标定位到中继器的行，点击鼠标右键，选择“删除行”，

删除行

10、双击中继器，选中中间的矩形，按Delete删除；拖入“三级标题”元件，并复制粘贴两次，分别将“样式”下面的名称命名为“名称”、“数量”、“价格”，同时单击“价格”三级标题，将字体颜色改为红色，如下图。最后，点击“关闭”。

删除矩形 复制粘贴三个标题

11、点击关闭后，拖入“文本标签”元件，复制粘贴两次，将文字分别改为“商品名称”、“商品数量”、“商品价格”，同时，拖入一条直线，放在这三个标签下方，调整合适的长度，将旋转角度设置为0。调整元件的位置，使之与中继器协调。

拖入标签

12、选中“提交”按钮，“新建交互”——>“单击时”，在“中继器动作”下面找到“添加行”，选择我们刚刚建立的中继器

新建交互 选择中继器

13、点击“添加行”，点击“name”下面的fx，

添加行 选择fx

跳出的文本框中，点击“添加局部变量”，“当前替换为“组合”下边商品名称的“（文本框）”，

添加局部变量

点击“插入变量或函数”，选择“LVAR1”，

插入变量或函数

最后的结果，如图所以。然后点击“确定”。

确定

14、同样的方法，依次设置“sale”、“number”下面的fx。

设置fx

“sale”的局部变量选择“组合”下商品价格的“文本框”，“插入变量或函数”选择“LVAR1”；

“number”的局部变量选择“组合”下商品数量的“文本框”，“插入变量或函数”选择“LVAR1”；

全部设置好后，是这个亚子，如下图。点击“确定”。

15、选中中继器，在右边“交互”下面点击“未选择任何目标”，

将“目标”选择中继器下面的“名称”，

“值”选择“插入变量或函数”，选择“Item.name”，将“三级标题”删去，点击“完成”；

继续“添加动作”，选择“设置文本”，

如下图，同样的方法设置商品数量；

同样的方法，设置商品价格。

全部设置完成，如下图：

预览效果，每提交一次，增加一行，效果实现，完结，撒花！