深入Axure 7中的Repeater（一）初识Repeater

测试环境

axure rp 7.0 English version

窗口总体

使用Firefox 38.0 进行浏览器预览

---

初识repeater

repeater是axure 7的新特性，多数人将其译为中继器，放在这里并不准确，这样的译法可能是受到了网络设备repeater命名为中继器的影响

repeater在axure 7中的功能与repeat（重复）相关，可以用来模拟表格之类的界面

表格即是大量单元格堆积起来的，从这个角度来看，repeat单元格便造就了表格

暂时没有合适的词来表达，就用repeater本身好了，起码比中继器要好不少

默认形式

repeater在common库中的最后一个位置，拖放出来默认效果是这样的

给这个repeater命名为默认repeater，默认的在onItemLoad事件触发了一个动作Set text on (Shape) equal to ''[[item.Column0]]"

双击默认repeater，进入另外一个新tab编辑

窗体上有一个30X100的矩形作为单元格的默认控件，可以删除，也可以随喜好添加，单元格的大小自适应其中所有元素的大小

下面的dataset数据集包含了3X1的数据，列的id为Column0，有3行数据分别为1，2，3

由于onItemLoad事件触发动作Set text on (Shape) equal to ''[[item.Column0]]"，将每个单元格矩形元素上的文字设置为单元格的Column0字段数值，这就解释了默认repeater是一个由1，2，3数字标识的矩形的堆叠，也很清楚的表明了Dataset的作用

修改样式

在这里之前，为了下面的示例效果，预先在Dataset中添加数据，如下

共7行数据

---

主窗口下方的3个tab最右边是样式窗口

分为4个部分Layout，Item background，Pagination和Spacing

Layout

这里有3个选项：Vertical和Horizontal很容易理解，使单元格垂直排列或者水平排列；Wrap选项的意思是限定单行或单列（根据Vertical和Horizontal来决定）的个数

如果设置属性为Vertical，Wrap为3，即

Item background

这里有2个选项，Back color和Alternating color

Back color直接调整背景色，如果对Alternating color也进行了设置，列表中单元格的背景色将是这两个颜色交替着出现

这里我们将Back color设置为#FFFFFF，Alternating color设置为#666666

可能有人会设置后没有什么效果，是因为单元格中的元素为一个不透明的矩形，挡住了背景色，我们可以将矩形的fillcolor设置为空

Spacing

这2个选项都相对简单，设置单元格之间的间距，这里都设置为10（单元不清楚，很大可能是px）

Pagination

顾名思义，这里进行的是分页的设置，在勾选了multiple pages之后，可以对Items per page与Starting page进行设置

Items per page决定了每页会有多少个单元格，也决定了一共会分为多少页；Starting page决定了在所有的页面中，最开始显示的是第几页

这里我们设置Items per page为3，Starting page为2，效果是

Ps:

如果要进行翻页的操作，需要触发相应的动作

在repeater的旁边放置两个button shape控件，命名为prev与next

对prev的onClick事件添加动作

对next的设置与其大概相同，只是将3处变为next，这样就可以进行翻页操作了

---

细心的会发现在Set Current Page动作列表的下面，有一个Set Items per Page动作，这个动作的设置也很简单，就是将Items per page的数值进行更换，可以配合其它控件进行动态的变化