Axure中继器结构与原理详解
中继器这个元件，对很多人来说是个难点，但实际上，只要理解它的结构和工作原理，使用起来非常简单。
首先，我们将中继器元件拖入画布，是下方这个样子。
看上去，这个元件由三个纵向排列的矩形组成。
这样的一个元件，怎么使用？
这里大家可以记住一句话：任何一个元件如果不会使用，先双击试试看。
当我们双击了中继器这个元件，在画布中，又打开了一个新的编辑区。
这个编辑区，是中继器内部内容的编辑区。
大家能够看到，在这个编辑区中，自带了一个矩形元件。
那么，这个矩形元件和我们刚才在页面中看到的中继器元件，有什么关联？
我们在这个编辑区中，我们把矩形随意挪动一下位置，并且再放入一个图片元件（或者其他元件），然后点画布上方的标签，切换回页面的编辑区。
这个时候，大家能够看到在页面中，之前的三个矩形矩形也移动了位置，并且新增了三个相同的图片元件。
看到这里，大家一定能够理解到，中继器内部的内容决定了页面中显示的内容。
不过，在页面中并不是一项内容，而是三项。
为什么在中继器中的一项内容，在页面中变成了三项？
这是由哪里控制的呢？
我们点中中继器这个元件，观察它的属性。
在它的属性中，有一个区域，好像表格。
这个区域叫“数据集”。
在这个区域中，大家能够看到，默认有一列三行的数据。
我给中继器的定义：中继器是一个重复列表项的元件。
如上图所示，默认情况下，中继器显示的列表项的数量与数据集中数据行的数量相一致。
所以，大家可以做一下尝试，在数据集中添加行或删除行的话，列表项也会相应的增加或减少。
另外，大家也能够注意到，中继器列表项的内容并不完全一样，上面显示的数字是不相同的。
不过，通过上图，大家也能够发现，列表项中矩形显示的数字，就是数据集中每一行“Column0”这一列的列值。
那么，这个列值是怎么关联到矩形上的呢？
如果要改变矩形的文字，我们就要通过【设置文本】的动作，去设置这个元件的文字。
不过，在什么时候，如何去设置这个矩形的文字为不同的列值？
我们可以在概要面板中，将中继器内部的矩形命名。例如：DefaultShape
然后，在中继器属性面板的顶部，大家能够看到默认有一些交互的设置。
这个设置是【每项加载时】，【设置文本】于矩形“DefaultShape”为“[[Item.Column0]]”。
首先，先来说说每项加载时这个触发事件，它体现了中继器的工作原理。
中继器这个元件，在页面中加载的时候，会读取数据集。
如果发现数据集存在数据，就将第一行数据读取出来，通过交互设置将数据与编辑区中的元件关联，生成列表项的第一项。
然后，再次读取数据集中的第二行，将数据通过交互设置与编辑区中的元件关联，生成列表项的第二项。以此类推，知道读取完所有的数据行后，停止列表项的生成加载。
所以，这个触发事件叫【每项加载时】。
那么，这个触发事件里面的动作，大家就能够理解是将数据集的数据与编辑区的元件进行关联。
不过，这个动作中有一个关键的内容就是“[[Item.Column0]]”。
Item是一个系统变量，中继器每个列表项加载时，所读取一行数据，都会存入这个系统变量。
Column0是列名。
Item.Column0就是指一行数据中Column0这一列的列值。
这个列值，在读取每一行数据时都是不同的。
所以 ，通过这样的交互，完成数据集数据与编辑区元件的关联，我们才看到了每一项中不同的内容。
最后，当我们在中继器数据集中添加新的行与列值的时候，中继器的列表项会随之增加。
这些列表项默认是垂直排列的。
那么，能不能让它水平排列，并且能够达到一定数量折行呢？
就好像某些商品列表一样，一排几个进行排布呢？
我们，点中中继器元件，然后在检视面板中，切换到样式的设置。
在这里，我们可以设置中继器列表的布局为【水平】布局。
勾选【网格排布】后，通过数量的设置，就能实现一定数量折行的效果。
另外，在这部分设置中，我们还可以设置列表项的背景色、交替背景色，列表项内容的多页显示，列表项之间的行间距、列间距等等。
综上所述，我们来总结一下中继器的基本组成，这也是中继器基础操作主要步骤。
1、内部编辑区
在中继器内部的编辑区中，我们要先创建列表项的模板内容。
这个模板内容决定每一个列表项中的元件组成结构。
2、数据集
在数据集中，我们要添加列表项的数据内容（含文字、图片以及引用页面）。
3、交互
在交互设置中，将数据集的内容与内部编辑区中模板元件建立关联。
4、样式
在样式设置中，我们可以对列表的布局、背景、分页以及列表项间距进行设置。
通过以上四部分内容以及相关的操作，才能够正确、完整的使用中继器这个元件。
备注：前三部分内容与步骤是必须的，样式的设置在某些应用中无需设置。
以上就是对中继器组成结构与工作原理的解析。
Axure中继器结构与原理详解相关推荐
- Axure-中继器结构与原理详解
本文转自:Axure原创教程网>>中继器结构与原理详解 中继器这个元件,对很多人来说是个难点.但实际上,只要理解它的结构和工作原理,使用起来非常简单.首先,我们将中继器元件拖入画布,是 ...
- Transformer 初识：模型结构+attention原理详解
Transformer 初识:模型结构+原理详解 参考资源 前言 1.整体结构 1.1 输入: 1.2 Encoder 和 Decoder的结构 1.3 Layer normalization Bat ...
- 压电加速度传感器的结构原理详解
压电加速度传感器的结构原理详解 [摘要]简述了压电加速度传感器的结构原理.说明了该传感器灵敏度的线性度问题,分析了其正向反向灵敏度的差异与"饱和现象",以便在生产.鉴定与使用时加以 ...
- 计算机组织与结构poc,CPU漏洞原理详解以及POC代码分享
原标题:CPU漏洞原理详解以及POC代码分享 首先,这个漏洞已经公布近一周时间了,看到各大媒体.公众号到处在宣传,本打算不再发布类似信息,但是发现很多媒体的报道达到了一个目的--几乎所有的CPU都有漏 ...
- LVS原理详解（3种工作方式8种调度算法）--老男孩
一.LVS原理详解(4种工作方式8种调度算法) 集群简介 集群就是一组独立的计算机,协同工作,对外提供服务.对客户端来说像是一台服务器提供服务. LVS在企业架构中的位置: 以上的架构只是众多企业里面 ...
- nginx配置文件及工作原理详解
nginx配置文件及工作原理详解 1 nginx配置文件的结构 2 nginx工作原理 1 nginx配置文件的结构 1)以下是nginx配置文件默认的主要内容: #user nobody; #配置用 ...
- 图像质量损失函数SSIM Loss的原理详解和代码具体实现
本文转自微信公众号SIGAI 文章PDF见: http://www.tensorinfinity.com/paper_164.html http://www.360doc.com/content/19 ...
- 深入剖析Redis系列(三) - Redis集群模式搭建与原理详解
前言 在 Redis 3.0 之前,使用 哨兵(sentinel)机制来监控各个节点之间的状态.Redis Cluster 是 Redis 的 分布式解决方案,在 3.0 版本正式推出,有效地解决了 ...
- SVM分类器原理详解
SVM分类器原理详解 标签: svm文本分类java 2015-08-21 11:51 2399人阅读 评论(0) 收藏 举报 分类: 数据挖掘 文本处理(16) 机器学习 分类算法(10) 目 ...
最新文章
- Node.js入门（含NVM、NPM、NVM的安装）
- 腾讯开源图计算框架 Plato：十亿级节点图计算进入分钟级时代
- 【译】OpenDaylight控制器：YANG Schema和Model
- javascript 模块模式
- 如何显示Magento的最新产品
- 超像素分割算法matlab_像素不够，算法来凑。这个图像超分辨率项目帮你「拍」出高清照片...
- web.config中namespace的配置（针对页面中引用）
- 2019 版idea设置字体大小
- 应用计算机测定线性电阻伏安特性实验结论,线性电阻和非线性电阻伏安特性曲线测定实验报告(共8篇).docx...
- 关于KDIFF3的使用
- 什么软件能识别树木花草？亲测好用的软件分享
- 【愚公系列】2022年11月 uniapp专题-优购电商-商品列表
- 从懵逼到再入门——JavaEE完整体系架构
- csdn里面代码块颜色
- 使用Travis-CI自动部署博客
- Linux 网络 I/O 模型简介（图文）
- 关于计算机的网络作文,关于网络作文
- 针对异常java.lang.IllegalStateException onMeasure() did not set the measured dimension解决方法
- 一台计算机的完全限定域名,什么是完全限定域名？
- 黑马程序员--IDEA版本2018Java基础班+就业班大牛编程吧