Axure RP 8.0 用中继器（repeater）完成按钮点击添加下拉菜单和文字

Axure RP 8.0 用中继器（repeater）完成按钮点击添加下拉菜单和文字

效果如图：

中继器是axure 7带来的功能，它的主要用途在于：一次性添加一组元件，并可以赋值。设想一个富功能的表格，表头为

姓名（文本）	头像（图片）	性别（下拉菜单）
小米	img	男/女
小米	img	男/女
小米	img	男/女

单要构成这样的表格，可以复制复制复制，不会麻烦很多。但是如果想实现点击按钮，触发事件，然后添加一行呢？
最上面的例子可以看出，最后多了一行1.5月的行。
这个例子同时展现了以下几点：
1. 中继器的制作，包括下拉菜单
2. 中继器初始内容的设置
3. 中继器滚动条效果
4. 按钮单击，将上面的一些文本框内容输入到中继器新一行
5. 不同文本框的互相约束（这个例子中，1月=4周）
作者漫漫冬程博客地址

---

一.制作元器件

1.首先从左边元件库拖动一个中继器（repeater）过来。

2.双击元器件，会打开新的页面，就是这个元器件子组件。刚才为什么是1、2、3三个方块？因为默认子组件有一个矩形。我们可以删掉它，添加我们自己的内容。

3.我们添加了一系列组件，可填的是一个下拉菜单，两个数字。两个数字的角标意味着我们在他们之上创建了事件。这个容后再说。

注意，对于这三个可编辑的文本框和菜单，都应该给他们以清晰的命名，以后会用到：

---

二.中继器初始内容的设置

现在我们添加默认设置。点击中继器，在他的右边栏属性中有两部分内容值得关注。一是每项加载时的事件，二是下面的中继器数据集（7.0中叫dataset，这里不再叫了）。

1. 首先，我们的子组件有三个要分配的单元（科室，月数，周数），创建三列。然后添加文字。注意两点：1.如果添加的是图片，可以右键，有导入图片选项；2。对于下拉菜单，要保证所填文本和想要初始化的那个选项完全一样。
2. 双击”每项加载时“，进入设置。
3. 对于文本框和下拉菜单我们分别处理。对于文本框，如图，左边点击设置文本，中间出现一个设置Text事件。

4.激活科室时间中的周数字（现在知道为什么要写名字了吧），下面开始设置文本。注意，item.XXX就是刚才数据集中的列，这是个固定的写法。刚才周数那一列的名字是week，所以这里是item.week。外面的双括号意指使用这个变量的值。月份数字一样。

1. 对于下拉菜单，从左边选择设置列表选中项，然后在右边找到子科室列表激活。下面有很多选项。选择被选项的话，可以选某一项作为默认值，或者选择值，然后写入[[Item.sick]]。这样我们的内容就绑定完成了。
   

作者漫漫冬程博客地址

---

三.按钮单击绑定

1. 首先添加一系列文本框作为输入。
   

2.对按钮添加鼠标点击时事件。左边找到添加行，右边选择刚才我们的中继器，然后点击下面的添加行。

3.这里又出现了三列，实际上是说点击按钮后，新加一行中三列分别是什么。每列中有fx按钮，用于添加较为复杂的情况，单击sick列的fx。

4.敲黑板，这里是新的知识点，局部变量概念。sick列需要把另一个下拉菜单（子科室列表head）的值作为写入值，因此，添加一个局部变量，这个变量的意思是，某个下拉菜单元件的当前被选项。构造好之后，上面直接插入[[LVAR!]]即可。

5.其他两个是取文字的，如下图，比较类似，选择指定元件的元件文字构造局部变量：

此时我们已经构建完了点击按钮添加一行的所有工作。

---

四.中继器滚动条效果

中继器列表可能很长，所以我们希望他在一个区域内滚动，非常简单，右键它，选择转换为动态模板，然后就可以圈出中继器的显示范围限制了：

然后，右键–>滚动条–>选择横竖滚动条。

---

五.不同文本框的互相约束（这个例子中，1月=4周）

最后，文字约束部分。当A文本框改变时，希望触发B文本框改变。
1.选择A文本框属性中的文字改变时。

2.依次选择设置文本，激活B文本框，打开fx：

3.fx的讲解很明白，他可以对变量进行计算。仍然先设置局部变量，这次是A文本框自己的文字。添加计算，结束。

---

总结

这个例子涉及到axure一些很精髓的部分，如事件绑定，局部变量公式编辑，中继器构造等等。梳理结构有利于以后不时回顾。

作者漫漫冬程博客地址