Axure中继器结构与原理详解

中继器这个元件，对很多人来说是个难点，但实际上，只要理解它的结构和工作原理，使用起来非常简单。 
首先，我们将中继器元件拖入画布，是下方这个样子。 

看上去，这个元件由三个纵向排列的矩形组成。 
这样的一个元件，怎么使用？ 
这里大家可以记住一句话：任何一个元件如果不会使用，先双击试试看。 
当我们双击了中继器这个元件，在画布中，又打开了一个新的编辑区。 
这个编辑区，是中继器内部内容的编辑区。 

大家能够看到，在这个编辑区中，自带了一个矩形元件。 
那么，这个矩形元件和我们刚才在页面中看到的中继器元件，有什么关联？ 
我们在这个编辑区中，我们把矩形随意挪动一下位置，并且再放入一个图片元件（或者其他元件），然后点画布上方的标签，切换回页面的编辑区。 

这个时候，大家能够看到在页面中，之前的三个矩形矩形也移动了位置，并且新增了三个相同的图片元件。 
看到这里，大家一定能够理解到，中继器内部的内容决定了页面中显示的内容。 
不过，在页面中并不是一项内容，而是三项。 
为什么在中继器中的一项内容，在页面中变成了三项？ 
这是由哪里控制的呢？ 
我们点中中继器这个元件，观察它的属性。 
在它的属性中，有一个区域，好像表格。 
这个区域叫“数据集”。 
在这个区域中，大家能够看到，默认有一列三行的数据。 

我给中继器的定义：中继器是一个重复列表项的元件。 
如上图所示，默认情况下，中继器显示的列表项的数量与数据集中数据行的数量相一致。 
所以，大家可以做一下尝试，在数据集中添加行或删除行的话，列表项也会相应的增加或减少。 
另外，大家也能够注意到，中继器列表项的内容并不完全一样，上面显示的数字是不相同的。 
不过，通过上图，大家也能够发现，列表项中矩形显示的数字，就是数据集中每一行“Column0”这一列的列值。 
那么，这个列值是怎么关联到矩形上的呢？ 
如果要改变矩形的文字，我们就要通过【设置文本】的动作，去设置这个元件的文字。 
不过，在什么时候，如何去设置这个矩形的文字为不同的列值？ 
我们可以在概要面板中，将中继器内部的矩形命名。例如：DefaultShape 
然后，在中继器属性面板的顶部，大家能够看到默认有一些交互的设置。

这个设置是【每项加载时】，【设置文本】于矩形“DefaultShape”为“[[Item.Column0]]”。 
首先，先来说说每项加载时这个触发事件，它体现了中继器的工作原理。 
中继器这个元件，在页面中加载的时候，会读取数据集。 
如果发现数据集存在数据，就将第一行数据读取出来，通过交互设置将数据与编辑区中的元件关联，生成列表项的第一项。 
然后，再次读取数据集中的第二行，将数据通过交互设置与编辑区中的元件关联，生成列表项的第二项。以此类推，知道读取完所有的数据行后，停止列表项的生成加载。 
所以，这个触发事件叫【每项加载时】。 
那么，这个触发事件里面的动作，大家就能够理解是将数据集的数据与编辑区的元件进行关联。 
不过，这个动作中有一个关键的内容就是“[[Item.Column0]]”。 
Item是一个系统变量，中继器每个列表项加载时，所读取一行数据，都会存入这个系统变量。 
Column0是列名。 
Item.Column0就是指一行数据中Column0这一列的列值。 
这个列值，在读取每一行数据时都是不同的。 
所以 ，通过这样的交互，完成数据集数据与编辑区元件的关联，我们才看到了每一项中不同的内容。 
 
最后，当我们在中继器数据集中添加新的行与列值的时候，中继器的列表项会随之增加。 
这些列表项默认是垂直排列的。 
那么，能不能让它水平排列，并且能够达到一定数量折行呢？ 
就好像某些商品列表一样，一排几个进行排布呢？ 
我们，点中中继器元件，然后在检视面板中，切换到样式的设置。

 
在这里，我们可以设置中继器列表的布局为【水平】布局。 
勾选【网格排布】后，通过数量的设置，就能实现一定数量折行的效果。 
另外，在这部分设置中，我们还可以设置列表项的背景色、交替背景色，列表项内容的多页显示，列表项之间的行间距、列间距等等。 
综上所述，我们来总结一下中继器的基本组成，这也是中继器基础操作主要步骤。 
1、内部编辑区 
在中继器内部的编辑区中，我们要先创建列表项的模板内容。 
这个模板内容决定每一个列表项中的元件组成结构。 
2、数据集 
在数据集中，我们要添加列表项的数据内容（含文字、图片以及引用页面）。 
3、交互 
在交互设置中，将数据集的内容与内部编辑区中模板元件建立关联。 
4、样式 
在样式设置中，我们可以对列表的布局、背景、分页以及列表项间距进行设置。 
通过以上四部分内容以及相关的操作，才能够正确、完整的使用中继器这个元件。 
备注：前三部分内容与步骤是必须的，样式的设置在某些应用中无需设置。 
以上就是对中继器组成结构与工作原理的解析。