(中继器结构与原理详解

                ****Axure中继器结构与原理详解****

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

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

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

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

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

这个设置是【每项加载时】，【设置文本】于矩形“DefaultShape”为“[[Item.Column0]]”。
首先，先来说说每项加载时这个触发事件，它体现了中继器的工作原理。
中继器这个元件，在页面中加载的时候，会读取数据集。
如果发现数据集存在数据，就将第一行数据读取出来，通过交互设置将数据与编辑区中的元件关联，生成列表项的第一项。
然后，再次读取数据集中的第二行，将数据通过交互设置与编辑区中的元件关联，生成列表项的第二项。以此类推，知道读取完所有的数据行后，停止列表项的生成加载。
所以，这个触发事件叫【每项加载时】。
那么，这个触发事件里面的动作，大家就能够理解是将数据集的数据与编辑区的元件进行关联。
不过，这个动作中有一个关键的内容就是“[[Item.Column0]]”。
Item是一个系统变量，中继器每个列表项加载时，所读取一行数据，都会存入这个系统变量。
Column0是列名。
Item.Column0就是指一行数据中Column0这一列的列值。
这个列值，在读取每一行数据时都是不同的。
所以 ，通过这样的交互，完成数据集数据与编辑区元件的关联，我们才看到了每一项中不同的内容。

最后，当我们在中继器数据集中添加新的行与列值的时候，中继器的列表项会随之增加。
这些列表项默认是垂直排列的。
那么，能不能让它水平排列，并且能够达到一定数量折行呢？
就好像某些商品列表一样，一排几个进行排布呢？
我们，点中中继器元件，然后在检视面板中，切换到样式的设置。

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