手把手教您使用Axure7.0的中继器(Repeater)

从零开始学运营,10年经验运营总监亲授,2天线下集训+1年在线学习,做个有竞争力的运营人。了解详情

中继器(英文名Repeater)是Axure RP 7.0推出的新功能,是目前为止Axure最复杂的功能(没有之一),学习它的使用有助于我们快速设计一些复杂的交互界面。下面和大家分享我的使用心得。

中继器这个翻译是让人费解的,如果直译成“重复器”虽然不太专业但是更利于理解,或者干脆不编译,用“Repeater”就行。用过Asp.Net的人,一定对里面的Repeater很熟悉,没错,Axure的Repeater与Asp.Net的原理基本上是一样的。

先来说说Repeater解决什么问题。


请看以下图片。上方是一个表单,有5个表单部件和一个“添加”按钮,界面默认显示下方4个图文区域。点击“添加”后出现第5个图文区域。每点击一次添加一个新的区域。没有Repeater之前,要制作这样的原型是非常困难的。

image001

 

使用Repeater实现以上效果是比较方便的。

1、  在界面中拖入一个Repeater。中文名叫“中继器”。

image002

刚拖进来是这个样子的。

image003

2、     设置Repeater内部部件

双击这个Repeater,进入Repeater内部界面。默认它会有一个矩形部件,删除它,按自己的需求拖入其他部件。如下,这个由一张图片与“活动名称”、“活动状态”、“开始时间”、“结束时间”4个Label部件组成的区域就是要重复显示的内容。

image004

注意,这时要给每个部件命名。从便在Repeater的动作中找到部件。方法如下:

image005

3、  设置Repeater的数据集(Dataset)

在Repeater编辑界面下方可看到以下界面。Repeater Dataset是数据集,另外两个一会再说。

在Dataset中设置要显示的数据的结构,同时可添加默认显示的数据。也就是“Column”与“Row”。以下”Name”、”Status”、”Start”、”End”、”Image”为添加的Column,注意列名必须为英文。

image006

4、  设置Repeater的动作(Item Interactions)

a)        设置文本部件值——“Set Text”

在OnItemLoad(注意不是OnLoad,中文版的同学请自行翻译)中双击Case。

image007

双击后出现以下界面。根据业务需要设置部件值。比如我是要设置一张图片和四个Label,于是分别选择了Set Text与Set Image。在最右侧选择Repeater内部的部件(注意:必须在第2步时设置部件名称,否则无法区分部件。)。以下为Set Text的界面。选择部件后,在下方选择Rich Text,再点击Edit Text。

image008

点击Edit Text后出现以下界面。

image009

点击Insert Variable of Function。

image010

在Repeater/Dataset中选择列的值。如item.Name,item.Status,item.Start等。然后在左侧文本框会出现带[[]]的值。[[]]是Axure取值的语法。

image011

b)        设置图片——“Set Image”

以上说的是设置文本的方式,如果是图片,可参见下图。可直接从电脑里导入,也可设置成Dataset里的值,当然也可根据Axure的语法设置成其他值。

image012

5、  设置Repeater的格式

下图是设置Repeater格式的界面。可以设置Wrap(自动换行),并设置每几个项目开始换行。背景什么的也可以设置。

image013

运行一下就可以看到效果了。

6、  实现点击“添加”的效果

回到主页面,这时变成以下效果了。Repeater根据自动计算呈现出所见即所得的效果。接下来,我们添加几个表单部件与一个“添加”按钮,来实现“添加”功能。

image014

为表单中的部件设置名称,如图。

image015

为“添加”部件设置OnClick事件,如图,双击”Case”:

image016

在打开的Case Editor界面中选择Repeaters-Dataset-Add Rows,勾选右侧复选框,点击右下方的Add Rows按钮。其原理是当点击“添加”按钮时向Repeater的Dataset中添加一行。

image017

弹出以下窗口,点击Add Row,在新添的这一行中录入表单部件值。可以通过点击fx按钮添加。

image018

点击fx后进入以下窗口。点击Add Local Variable。在第一格录入变量名称,如LVAR_Name。如果要取文本框的值,第二格可以选text on widget。第三格选相应的部件。

image019

再点击Insert Variable or Function,选择刚设置的变量LVAR_Name。点击OK。再将另几个部件值也设置上即可。

这样,就完成了点击“添加”按钮的效果了。

本文为作者李萧泓投稿发布,转载请注明出处并保留本文链接

赞赏是对原创者的最大认可
1人打赏
评论
欢迎留言交流
  1. 下拉列表的内容,添加出来是[object Object]是怎么回事,有人碰到过吗?

    回复
  2. 按照这个教程来操作,出现两个问题:
    1、交互样式选择错地方,后面发现是要在“中继器项目交互”中设置;
    2、在“中继器项目交互”中设置设置文本后,发现没有变量化,后面发现是引文文本的变量值类型要选择richtext;
    2、图像按照叫做中来一直不成功,后从别的地方看到,在中继器数据集中图片那栏是要右击“导入图片”,然后交互中设置图像就可以了。

    回复
    1. 按照帖子中的方法添加文字是可以的,但是为什么添加图片是不能实现呢?
      在中继器数据集中图片那栏是要右击“导入图片”,然后交互中设置图像就可以了。这个只会把图片固定了,而不是可以任意选择图片
      谢谢

      回复
    2. 要先将图片选择框的文本文字赋值给中继器里的img。要将选择图片的位置固定下来,再设置axure。
      将[[LVAR_img]]改为 E:\[[LVAR_img.substring(LVAR_img.lastindexof(‘\\’)+1)]]。
      随后要发布或者生成html才能查看,预览是看不到效果的。

      回复
  3. 那个 鼓捣了一上午 我大概知道上传图片无法显示是什么情况了。做了无数遍的测试,终于~~~~~成功了。
    童鞋们,不要F5预览了,F8生成HTML文件吧,然后IE可以,火狐也显示不出来 :arrow: :???:
    好闹心,一天就鼓捣了这个 :cry:

    回复
  4. Repeater的数据集 第三步 这里就歇菜了 压根没有数据集内容展现

    回复
  5. 简单明了 ,按教程做了下,成功了,就是添加图片不知道怎么显示出来

    回复
  6. 第5点,在哪里设置Repeater的格式?

    回复
  7. 第6步添加活动图片无法实现 有人做出来吗?求指点

    回复
  8. 设置的图片都长一样啊,怎么设置每个item对应的图片

    回复
    1. 右键,导入图片

      回复
  9. 数据集里面的图片地址怎么填啊?图片显示不出来,求助~

    回复
    1. 预览后,查看图片属性,复制图片的路径(复制image及后面的字符),回到Axure中,在增加行的编辑中,将刚才复制的内容粘贴到图片那一栏的输入框内,点击确定,再预览,搞定了

      回复
    2. 点f5在浏览器预览,怎么查看图片的属性和复制路径啊?

      回复
    3. 右键点击图片,再点击属性啊,要不你加我QQ吧,我截图给你看
      152355340,

      回复
    4. 加了,天灰

      回复
  10. 第四步,直接用值,函数,不用Rich Text 也可以吧?另外也不用设置变量,直接取中继器里面的数值就行了。

    回复
    1. 是的

      回复
  11. 如何添加图片啊,添加出来的都不带图,求助 :roll: :roll: :roll:

    回复
    1. 我也遇到同样的问题,请问解决了吗?

      回复
    2. 我的也是图片不显示啊,你的问题解决了么

      回复
    3. 我也遇到了同样的问题,请问解决了吗

      回复
    4. 图片那个有添加成功的没,我的是个叉子

      回复
    5. set image 时候要再default中将value换成image,然后再导入一次,图片才可以显示出来。

      回复
  12. 选择图片后,获取到的路径应该怎么进行处理,一直显示一把叉

    回复
    1. 我的也是一把叉。。。。

      回复
  13. 非常感谢分享,有点明白了中继器的用途了 :grin:

    回复
  14. 谢谢分享,为什么按照步骤去做新增的图片不展示呢?

    回复
  15. 从来没有接触过,看着这个学的也算成功,感恩~[哈哈]

    回复
  16. 照着做出来了,但不明白原理

    回复
  17. 终于有人研究了呀~大神辛苦啦~谢谢大神分享~[赞][给力]

    回复
  18. @我的印象笔记

    回复
  19. 请问点击按钮的时候图片怎么添加。。。一直做不成功0 0

    回复
    1. 你用什么浏览器?只有IE才可以添加图片。

      回复
    2. IE内核的都可以好吗

      回复
    3. 同问,用的是IE浏览器,图片怎么添加进去?

      回复
  20. 不会用中继器

    回复
  21. 非常不错,值得收藏,学习了

    回复
  22. @有道云笔记收藏

    回复
  23. [哈哈] 不错的图文教程,中继器小编运用的很熟练了

    回复
  24. [爱你][爱你]

    回复
  25. 不错不错,挺简洁易懂的。随着文章走了一遍,遇到一个问题:点击“添加”的时候,状态status下拉框的值取不出来,怎么破??

    回复
    1. 如果是下拉框,要选selected option of,而不是text on widget。

      回复
  26. 太牛X。。。前几天看了一个介绍中继器怎么用的,不过看的头大。。。这个简洁明了,非常不错

    回复
    1. 没准我和你看到的是同一篇的。正是因为那篇文章写得不清楚,我才写了这一篇。

      回复
  27. 撸过 mark

    回复
  28. @我的印象笔记

    回复
  29. @有道云笔记收藏

    回复
  30. @我的印象笔记

    回复