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，

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

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

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

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

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

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

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

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

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

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

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

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

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

全部设置完成，如下图：

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

方法/步骤

打开Axure8 找到元件，如下图所示：

请点击输入图片描述

根据下图做出界面布局，元件有：中继器一个，按钮三个（添加、编辑、删除）、文本框一个（添加、编辑时输入使用）

根据图示，对各个元件名称：中继器、添加按钮、编辑按钮、删除按钮、文本、中继器内容（使用axure时一定要记得对元件命名，元件相同的太多就会混乱，影响思路）

请点击输入图片描述

布局做好后，先简单认识一下 中继器，系统默认为我们添加了三个内容，以及设置了一个交互用例：

请点击输入图片描述

选中“添加”按钮，点击交互用例”鼠标单击时“，d出”用例编辑“窗体，选择  中继器-->添加行，选中右侧 ”中继器“字样，点击下面的”添加行“按钮。

请点击输入图片描述

请点击输入图片描述

在d出的窗体上点击如图所示的地方，来添加一个局部变量：

请点击输入图片描述

请点击输入图片描述

根据下图所示，设置局部变量：先选择”元件文字“，再选择元件”文本“，意思是：变量 等于 所选择元件的文字；

请点击输入图片描述

点击上面的”插入变量或函数“ 找到变量，点击即可。效果如下图：

请点击输入图片描述

一路确定后，F5预览，并测试添加效果。下一片经验我们继续中继器的其他相关 *** 作。

请点击输入图片描述

拖动中继器元件，新建一个。如图，是一个一列三行的表格，注意一下右侧“交互”和“中继器”两块用绿框圈起来的部分，[[item.Column0]] 中的 Column0 与 “中继器”的第一列列名一样。但是， 文字于（矩形）中的‘矩形’不知道对应的是哪一个，别着急，往下看。

鼠标双击步骤1的表格，进入下图，可以看到有一个矩形框，我们把矩形框的名字改成 ‘测试矩形’。然后再返回步骤1的界面。

可以看到，交互里面的名字已经变过来了，变成了‘测试矩形’。现在我们就知道他们之间到底是怎么关联的了。

我们接着走下一步，在步骤2中再添加一个矩形，更改名称为‘矩形1’，如图：

返回中继器页面，可以看到多了一列。

在步骤5中，我们在右侧绿框选中的中继器数据表中看到，新增了一列“Column1”，并且在下面新增了一行数据‘23’，但是中继器没有变化，第二列仍然是空白列。

这个时候我们需要在交互中点击 Case1，再次配置“每项加载时”的交互动作，如下图：

按照绿框标注，将已命名为“矩形1”的矩形框设置文本为[[item.Column1]]，Column1对应中继器数据表中新增的列“Column1”，点击确定。

如图，配置 Column1的行数据，就可以看到中继器第二列的数据都显示了出来。

下面我们开始进阶，如图，新建两个文本输入框和添加、删除按钮。对每个文本框都进行命名‘name’、‘age’。

选中“添加”按钮，配置交互-鼠标单击时：

中继器-数据集-添加行，按图示顺序 *** 作，下一步需要配置“TestColumn1”和“Column1”的数据。

点击 fx,在d出页面中点击“添加局部变量”，设置元件文字=name，name 是中继器页面 “姓名文本输入框”的名称。

在点击插入变量或函数，选择 LVAR1变量名，如图：

同样，对步骤10 中的第二个 fx也进行类似的 *** 作，只不过元件文字=age.

以上两步都完成后，点击确定。

返回中继器页面，点击预览。

在名称和年龄文本框中输入一些文字或数字，点击添加按钮，就会有一行新的数据显示在下方。同理，删除也是一样的 *** 作，只不过交互动作就变成了中继器-删除行。

---