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

Posted 2023-05-03

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

步骤：

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”，将“三级标题”删去，点击“完成”；

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

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

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

全部设置完成，如下图：

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

Axure RP 7.0 标准教程--基本介绍

母版：用来放置一些相同元素的部件  两个页面都放入母版   一处更改 所有更改

添加图片：双击可以本地添加

----------

创建share.axure账号  https://share.axure.com

之后可以在你的project创建你的项目 最好已版本号为基准 1.0 等等

然后登陆你的axure rp 然后点击发布 --》点击AX SHARE 然后把你想要的项目发布到share axure

之后会给你一个链接 然后就可以通过这个链接来查看