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

小灰灰 2021-09-23 11:16 567阅读 0赞

本文转自：[Axure原创教程网][Axure]>>[中继器结构与原理详解][Link 1]

中继器这个元件，对很多人来说是个难点。但实际上，只要理解它的结构和工作原理，使用起来非常简单。首先，我们将中继器元件拖入画布，是下方这个样子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]  
  看上去，这个元件由三个纵向排列的矩形组成。这样的一个元件，怎么使用？这里大家可以记住一句话：任何一个元件如果不会使用，先双击试试看。当我们双击了中继器这个元件，在画布中，又打开了一个新的编辑区。这个编辑区，是中继器内部内容的编辑区：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]  
  在这个编辑区中，自带了一个矩形元件。那么，这个矩形元件和我们刚才在页面中看到的中继器元件，有什么关联？我们在这个编辑区中，我们把矩形随意挪动一下位置，并且再放入一个图片元件（或者其他元件），然后点画布上方的标签，切换回页面的编辑区：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]  
  这个时候，大家能够看到在页面中，之前的三个矩形矩形也移动了位置，并且新增了三个相同的图片元件。看到这里，大家一定能够理解到，中继器内部的内容决定了页面中显示的内容。不过，在页面中并不是一项内容，而是三项。为什么在中继器中的一项内容，在页面中变成了三项？这是由哪里控制的呢？我们点中中继器这个元件，观察它的属性。在它的属性中，有一个区域，好像表格。这个区域叫“数据集”。在这个区域中，大家能够看到，默认有一列三行的数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]  
  我给中继器的定义：中继器是一个重复列表项的元件。如上图所示，默认情况下，中继器显示的列表项的数量与数据集中数据行的数量相一致。所以，大家可以做一下尝试，在数据集中添加行或删除行的话，列表项也会相应的增加或减少。另外，大家也能够注意到，中继器列表项的内容并不完全一样，上面显示的数字是不相同的。不过，通过上图，大家也能够发现，列表项中矩形显示的数字，就是数据集中每一行“Column0”这一列的列值。那么，这个列值是怎么关联到矩形上的呢？如果要改变矩形的文字，我们就要通过【设置文本】的动作，去设置这个元件的文字。不过，在什么时候，如何去设置这个矩形的文字为不同的列值？我们可以在概要面板中，将中继器内部的矩形命名。例如：DefaultShape。然后，在中继器属性面板的顶部，大家能够看到默认有一些交互的设置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]  
  这个设置是【每项加载时】，【设置文本】于矩形“DefaultShape”为“\[\[Item.Column0\]\]”。首先，先来说说每项加载时这个触发事件，它体现了中继器的工作原理。中继器这个元件，在页面中加载的时候，会读取数据集。如果发现数据集存在数据，就将第一行数据读取出来，通过交互设置将数据与编辑区中的元件关联，生成列表项的第一项，然后，再次读取数据集中的第二行，将数据通过交互设置与编辑区中的元件关联，生成列表项的第二项。以此类推，直到读取完所有的数据行后，停止列表项的生成加载。所以，这个触发事件叫【每项加载时】。那么，这个触发事件里面的动作，大家就能够理解是将数据集的数据与编辑区的元件进行关联。不过，这个动作中有一个关键的内容就是“\[\[Item.Column0\]\]”。Item是一个系统变量，中继器每个列表项加载时，所读取一行数据，都会存入这个系统变量。Column0是列名。Item.Column0就是指一行数据中Column0这一列的列值。这个列值，在读取每一行数据时都是不同的。所以，通过这样的交互，完成数据集数据与编辑区元件的关联，我们才看到了每一项中不同的内容。  
![在这里插入图片描述][20191119104044549.png]  
  最后，当我们在中继器数据集中添加新的行与列值的时候，中继器的列表项会随之增加。这些列表项默认是垂直排列的。那么，能不能让它水平排列，并且能够达到一定数量折行呢？就好像某些商品列表一样，一排几个进行排布呢？我们，点中中继器元件，然后在检视面板中，切换到样式的设置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]  
  在这里，我们可以设置中继器列表的布局为【水平】布局。勾选【网格排布】后，通过数量的设置，就能实现一定数量折行的效果。另外，在这部分设置中，我们还可以设置列表项的背景色、交替背景色，列表项内容的多页显示，列表项之间的行间距、列间距等等。  
  综上所述，我们来总结一下中继器的基本组成，这也是中继器基础操作主要步骤。

1、内部编辑区

在中继器内部的编辑区中，我们要先创建列表项的模板内容。这个模板内容决定每一个列表项中的元件组成结构。

2、数据集

在数据集中，我们要添加列表项的数据内容（含文字、图片以及引用页面）。

3、交互

在交互设置中，将数据集的内容与内部编辑区中模板元件建立关联。

4、样式

在样式设置中，我们可以对列表的布局、背景、分页以及列表项间距进行设置。通过以上四部分内容以及相关的操作，才能够正确、完整的使用中继器这个元件。

备注：前三部分内容与步骤是必须的，样式的设置在某些应用中无需设置。以上就是对中继器组成结构与工作原理的解析。

[Axure]: http://www.iaxure.com/
[Link 1]: http://www.iaxure.com/5771.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20210923/245d7285e90e4de895ef3423c9f38240.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20210923/97f867264a6b4c63b8ddd9c71dcb1083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20210923/3c0328a0ddb247aa8f9a3aaee0acbcba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20210923/011221aa7b1a4f0e855d0ef26d92c9bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: /images/20210923/df0923d77eab4747bb4f9ff9725ead80.png
[20191119104044549.png]: /images/20210923/1afdcfe3bfc247cebe0d49facd0d0803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2xlaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]: /images/20210923/91fcc4cc25074d2eb267c51a0396eef1.png