AxureRP7.0基础教程 部件详解中继器repeater

原型库网站—讲师金乌原创发布，可自由转载，请注明出处！
Axure中文官网：www.AxureRP.cn

《AxureRP7.0部件详解》
中继器概述 REPEATER OVERVIEW

中继器部件是一款高级部件，用来显示重复的文本、图片和链接. 通常使用中继器来显示商品列表、联系人信息列表、数据表或其他.

中继器的构成 2 PARTS OFREPEATER


中继器数据集 Repeater Dataset

中继器部件是由中继器数据集中的数据项填充的.这些填充的数据项可以是文本、图片或页面链接.

双击中继器，进入中继器数据集，在页面底部面板的最左侧标签可以看到.



中继器的项Repeater Item

被中继器部件所重复的布局叫做项（项目）.双击中继器部件进入中继器项进行编辑.

在右侧图片显示的编辑视图中所展示的部件，会被重复多次（数据集中有几行就重复几次）.

填充数据到设计区域

使用每项加载时事件填充数据到设计区域 POPULATING DATA INTO THE DESIGN AREAWITH ONitemload

每项加载时事件

插入文本Inserting Text

双击每项加载时OnItemLoad 事件并使用设置文本动作插入文本到你的中继器.

在 用例编辑器中选择设置文本Set text动作然后在用例编辑器右侧选择你想要插入的文本部件，在右下角点击设置文本值Set text to value 打开 编辑文本Edit text 然后点击 Insert Variable or Function 选择变量 [[Item.ColumnName]]并点击OK.

当你的中继器项加载时，就会将数据集中列(column)的内容插入到你刚刚设置的文本部件中了.

中继器中插入图片

插入图片Inserting Text

导入图片到数据集中并使用 设置图像Set Image 动作 将图片插入到中继器项中.

在 中继器数据集中右键点击要插入图片的项，点击导入图片Import Image并添加图片.然后双击 每项加载时 Onitemload 事件，添加 设置图像 Set image 动作. 选择要将图片插入到哪个部件，然后在默认下拉选项中选择值 Value并在右侧点击fx选择[[item.ColumnName]] ,点击OK.

在中继器包含的部件中使用交互

USING REPEATER DATA IN INTERACTIONS ON CONTAINED WIDGETS

中继器的数据可以添加交互，比如添加基于条件判断的页面链接.

中继器数据交互

插入页面链接（参照页）Inserting Page Links

中继器数据集的项中可以添加参照页（页面链接）,当用户点击时就跳转到相关页面.

右键点击一个空白项并选择 参照页Reference Page，然后选择页面.

在 终极其中选择一个你想要触发页面跳转动作的部件，对其添加动作 在当前页打开Open Link in CurrentWindow，然后选择链接到外部url或文件 Link toan external url or file ，点击fx ，在弹出的编辑值Edit Value窗口中点击 Insert Variable or function 下拉列表中选择在数据集中添加了参照页的列名.

使用条件

使用条件Using Conditions

数据集中的项值可以使用带有特定条件的动作进行评估，例如，你可以设置数据集中名称为age的列，如果值>16就设置为选择状态，这样可以突出显示特定的数据项.

中继器格式

REPEATER FORMATTING

中继器格式

布局 Layout: 该设置允许改变数据的显示方式.

纵向 Vertical: 设置中继器数据集中的项纵向/垂直显示.

横向 Horizontal: 设置中继器数据集中的项横向/水平显示.

换行 Wrap Grid: 超过指定数量就换行/换列.

每列包含数量 Items Per Column:设置每行/每列中包含的数据项的数量.

项的背景色 Item Background: 给中继器添加背景色

背景色 Back Color: 给每个中继器的项添加背景色.

交替背景色 Alternating Color: 给中继器的项添加交替背景色.

分页 Pagination: 设置在同一时间显示指定数量的数据集的项.

多页 Multiple Pages: 将中继器中的项放在多个页面中切换显示.

每页项的个数 Items Per Page: 设置中继器的项在每个单页中显示的数量.

开始页 Starting Page: 设置默认显示哪个页面.

间距 Spacing: 设置行/列数据之间的间隔

Row: 设置每行数据之间，相隔的像素大小.

Column:设置每列数据之间，相隔的像素大小.

中继器部件的高级教程

排序Sort

过滤Filter

分页Paginate