中继器结构与原理详解

AxureRP8.0教程 小楼一夜听春语 4208℃ 0评论

中继器这个元件,对很多人来说是个难点。

但实际上,只要理解它的结构和工作原理,使用起来非常简单。

首先,我们将中继器元件拖入画布,是下方这个样子。

看上去,这个元件由三个纵向排列的矩形组成。

这样的一个元件,怎么使用?

这里大家可以记住一句话:任何一个元件如果不会使用,先双击试试看。

当我们双击了中继器这个元件,在画布中,又打开了一个新的编辑区。

这个编辑区,是中继器内部内容的编辑区。

大家能够看到,在这个编辑区中,自带了一个矩形元件。

那么,这个矩形元件和我们刚才在页面中看到的中继器元件,有什么关联?

我们在这个编辑区中,我们把矩形随意挪动一下位置,并且再放入一个图片元件(或者其他元件),然后点画布上方的标签,切换回页面的编辑区。

这个时候,大家能够看到在页面中,之前的三个矩形矩形也移动了位置,并且新增了三个相同的图片元件。

看到这里,大家一定能够理解到,中继器内部的内容决定了页面中显示的内容。

不过,在页面中并不是一项内容,而是三项。

为什么在中继器中的一项内容,在页面中变成了三项?

这是由哪里控制的呢?

我们点中中继器这个元件,观察它的属性。

在它的属性中,有一个区域,好像表格。

这个区域叫“数据集”。

在这个区域中,大家能够看到,默认有一列三行的数据。

我给中继器的定义:中继器是一个重复列表项的元件。

如上图所示,默认情况下,中继器显示的列表项的数量与数据集中数据行的数量相一致。

所以,大家可以做一下尝试,在数据集中添加行或删除行的话,列表项也会相应的增加或减少。

另外,大家也能够注意到,中继器列表项的内容并不完全一样,上面显示的数字是不相同的。

不过,通过上图,大家也能够发现,列表项中矩形显示的数字,就是数据集中每一行“Column0”这一列的列值。

那么,这个列值是怎么关联到矩形上的呢?

如果要改变矩形的文字,我们就要通过【设置文本】的动作,去设置这个元件的文字。

不过,在什么时候,如何去设置这个矩形的文字为不同的列值?

我们可以在概要面板中,将中继器内部的矩形命名。例如:DefaultShape

然后,在中继器属性面板的顶部,大家能够看到默认有一些交互的设置。

这个设置是【每项加载时】,【设置文本】于矩形“DefaultShape”为“[[Item.Column0]]”。

首先,先来说说每项加载时这个触发事件,它体现了中继器的工作原理。

中继器这个元件,在页面中加载的时候,会读取数据集。

如果发现数据集存在数据,就将第一行数据读取出来,通过交互设置将数据与编辑区中的元件关联,生成列表项的第一项,

然后,再次读取数据集中的第二行,将数据通过交互设置与编辑区中的元件关联,生成列表项的第二项。以此类推,知道读取完所有的数据行后,停止列表项的生成加载。

所以,这个触发事件叫【每项加载时】。

那么,这个触发事件里面的动作,大家就能够理解是将数据集的数据与编辑区的元件进行关联。

不过,这个动作中有一个关键的内容就是“[[Item.Column0]]”。

Item是一个系统变量,中继器每个列表项加载时,所读取一行数据,都会存入这个系统变量。

Column0是列名。

Item.Column0就是指一行数据中Column0这一列的列值。

这个列值,在读取每一行数据时都是不同的。

所以,通过这样的交互,完成数据集数据与编辑区元件的关联,我们才看到了每一项中不同的内容。

最后,当我们在中继器数据集中添加新的行与列值的时候,中继器的列表项会随之增加。

这些列表项默认是垂直排列的。

那么,能不能让它水平排列,并且能够达到一定数量折行呢?

就好像某些商品列表一样,一排几个进行排布呢?

我们,点中中继器元件,然后在检视面板中,切换到样式的设置。

在这里,我们可以设置中继器列表的布局为【水平】布局。

勾选【网格排布】后,通过数量的设置,就能实现一定数量折行的效果。

另外,在这部分设置中,我们还可以设置列表项的背景色、交替背景色,列表项内容的多页显示,列表项之间的行间距、列间距等等。

综上所述,我们来总结一下中继器的基本组成,这也是中继器基础操作主要步骤。

1、内部编辑区

在中继器内部的编辑区中,我们要先创建列表项的模板内容。

这个模板内容决定每一个列表项中的元件组成结构。

2、数据集

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

3、交互

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

4、样式

在样式设置中,我们可以对列表的布局、背景、分页以及列表项间距进行设置。

通过以上四部分内容以及相关的操作,才能够正确、完整的使用中继器这个元件。

备注:前三部分内容与步骤是必须的,样式的设置在某些应用中无需设置。

以上就是对中继器组成结构与工作原理的解析。

关于中继器的实际应用,大家可以查看本站中与中继器相关的案例教程。

例如【在线阅读】中的案例16-案例22,阅读地址:http://www.iaxure.com/menupage/book.html

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 中继器结构与原理详解

喜欢 (21)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 小楼老师!我想做一个收藏夹功能、就是对某个图片点了收藏之后,就可以在收藏夹里看到它了。。这个要用什么功能呀?
    taociniren2017-07-05 17:33 回复
    • 就添加行呗
      liangllk2017-07-12 15:28 回复
  2. 这个滑动条 不好看 换一个吧
    恩恩额2017-07-06 16:21 回复