撰写创建一个基于网格的产品列表。使用中继器元件的样式选项来创建网格布局，将图片元件导入中继器的数据集，并将它们显示在中继器项目的图片元件上，一次使用多个数据集的列值，设置文本到中继器的元件上。
如果你不熟悉中继器元件，你可以在我们的中继器元件参考指南中了解它的功能和使用方法，你也可以从我们的中继器基础教程开始。
STEP 0：下载中继器练习文件
如果你还没有练习文件，请下载Axure中继器练习文件.rp并在Axure RP中打开它，该文件包含了Axure中继器教程中对应的每个页面。
STEP 1：创建网格布局
在中继器练习文件中打开“中继器高级应用-产品列表”页面，画布上有一个名为“书籍”的中继器元件，其中包含了九个数据行和三个元件，一个“背景”矩形元件，一个“信息”矩形元件，和一个“封面”图片元件。
选中“书籍”中继器，在检视窗格中打开样式页签，在“布局”部分中，选中标有“水平”的单选按钮以更改中继器的排列方向，然后勾选“网格排布”的复选框，并且设置“每排项目数”为“3”，现在中继器应该显示为一个3乘3的网格。
现在让我们在中继器的项目之间添加一些间距，向下滚动到样式页签最下面的“间距”部分，将“行”和“列”的值设置为“15”。
STEP 2：设置图片
在“书籍”中继器被选中的状态下，切换到检视窗格中的属性页签，在数据集中，注意有三列：“Title”列包含了书籍的标题，“Author”列包含了书籍的作者姓名，“Cover”列包含了书籍的封面图片文件。
备注：你可以通过在单元格上点击右键，并在右键菜单中选择“导入图片”，来将图片文件导入到数据集的单元格中。
在属性页签的顶部，双击“每项加载时”来添加一个新的每项加载时用例。
在用例编辑器中，点击左侧“添加动作”栏中的“设置图片”动作，在右侧“配置动作”栏中选择“封面”图片元件
在右侧“配置动作”栏的下方，注意有五种可以导入图片的类型。第一个，“Default”，是图片元件的默认图片，其他四个引用的图片元件的<交互样式>。我们不会为“封面”图片元件设置任何交互样式，所以我们只设置“Default”图片。
在“Default”下方的下拉列表中，选择“值”，这时候会出现一个文本框，点击文本框右边的“fx”按钮以打开编辑值对话框。
在对话框的顶部，点击“插入变量或函数…”，在弹出的菜单中点击“中继器/数据集”下面的“Item.Cover”，注意，这时候对话框顶部的文本框中会显示“[[Item.Cover]]”。
点击“确定”按钮关闭编辑值对话框，再次点击“确定”按钮关闭用例编辑器，现在每个中继器项目中的图片元件都会显示一个书籍封面。
STEP 3：使用多个数据集列值设置文本
在“书籍”中继器元件被选中的状态下，在检视窗格中的属性页签下，双击“每项加载时”下面的“Case 1”来进一步编辑用例。
在用例编辑器中，点击左侧“添加动作”栏中的“设置文本”动作，在右侧“配置动作”栏中选择“信息”矩形元件。
在右侧“配置动作”栏的底部，将“设置文本为”下方的下拉列表选项“值”改为“富文本”，然后点击出现的“编辑文本”按钮。
在弹出的输入文本对话框中，删除顶部文本区域中的现有文本，然后在文本格式选项下点击“插入变量或函数…”，在弹出的菜单中，点击“中继器/数据集”下面的“Item.Title”，这时候“[[Item.Title]]”将出现在顶部的文本区域中，并且被格式化为18号的粗体样式。
按下回车键进行换行，输入“by ”（包括后面的空格），然后再次点击“插入变量或函数…”，在弹出的菜单中点击“中继器/数据集”下面的“Item.Author”，这时候“[[Item.Author]]”将出现在顶部文本区域中“by”的后面，显示为“by [[Item.Author]]”。
选中文本区域中的第二行并删除粗体格式，然后将字号设置为16。
点击“确定”按钮关闭输入文本对话框，然后再次点击“确定”按钮关闭用例编辑器。现在，每个中继器项目中的“信息”矩形将会以较大的粗体显示署名，并且在书名下方以较小的字体显示作者姓名。