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

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

中继器(英文名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。再将另几个部件值也设置上即可。

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

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

您的赞赏,是对我创作的最大鼓励。

评论( 64

登录后参与评论
  1. 大神文章其实可以再详细点!差点死在添加的最后两步,研究半天才成功 :arrow: 这里详细说下,说不定对其他人可以有用。
    添加部件的动态设置中,选择了中继器/数据集/新增行,设置新增行时会弹出一个设置窗,
    弹出窗口中,直接点fx位置进入另一个窗口,
    先设置局部变量,如设置名字、赋值等;局部变量设置完成后再设置全局变量,直接选定刚才设置的局部变量名 字(如LAVR_name),确定后,上一个窗口的变量名字就会变为[[LAVR_name]],并且设置该变量的函数。
    需要注意的是:
    image局部变量设置时,是赋值“选中状态值”,后面选择中继器中的的图片(我没有导入图片);
    status局部变量设置时,是“选中项文字”,后面选择下拉列表(也只有一个下拉列表)
    其他的是赋值“元件文字”,然后选择对应的单行文本框(根据命名)
    最后确定第一个弹窗完成新增行设置,点击确定动态的用例;预览中点击添加按钮,即出现预期效果。

    回复
    1. 回复

      page界面中的图片部件是什么呀 如何设置呢,我这边点击添加出不来图片

    2. 回复

      就是那个中间是蓝色的image元件啊 拖到页面后 双击出现添加/导入图片的窗口(和上传图片一样)

  2. 求解:点击添加按钮会出现新的行,也有图片,只是设置好的列间距会消失,不知怎么回事?

    回复
    1. 回复

      现在解决没?我的没有问题啊 图片试了几次才弄出来,最终是最后效果

  3. 我在“提交”按键中设置的路径是C:\[[LVAR_image.substring(LVAR_image.lastindexof(‘\\’)+1)]],网页预览时,我通过网页代码看到图片的路径是我设置好放图片固定的文件夹src=”C:\cloudy.png”,但预览中是看不到图片显示。发布后,选择图片上传,通过网页代码看到的图片路径却是另一个路径src=”C:\fakepath\cloudy.png”,如果我把图片放在src=”C:\fakepath\cloudy.png”下,发布后选择上传是可以正常显示图片的。我就想知道,为什么发布后,选择图片上传路径会定在C:\fakepath\文件下,图片又没有上传存到这个位置,导致无法显示。

    回复
  4. :grin:

    回复
  5. 您好,按照帖子中的方法添加文字是可以的,但是为什么最后的选择添加图片是不能实现呢?

    回复
    1. 回复

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

    2. 回复

      image局部变量设置时,是赋值“选中状态值”,后面选择中继器中的的图片;
      status局部变量设置时,是“选中项文字”,后面选择下拉列表(也只有一个下拉列表)
      其他的是赋值“元件文字”,然后选择对应的单行文本框(根据命名)

  6. 1.数据集里面image列插入的图片显示不了;
    2.生成后图片不显示,只显示链接地址,为何?谁能给解答一下?谢谢了~

    回复
    1. 回复

      导入图片试试

    2. 回复

      这两个问题已解决,只是在“预览”点击“添加”后,新的图片不显示 :cry:

    3. 回复

      选择好图片后,点击【添加】按。新添加成功的信息中,图片不显示,是为什么呢?

    4. 回复

      图片在编辑区单元格内右键直接导入图片就可以了

加载中