Repeater(中继器)控件的用法

Axure中的Repeater控件顾名思义就是可以重复添加内容,而无需逐个进行添加。该控件对于以九宫格类、列表类的形式内容时非常有效,且支持用户添加、修改、删除控件中的内容。
Repeater控件的使用步骤为:
定义元素–>添加数据–>绑定数据–>修改样式–>数据操作
下面以添加列表类内容为例,逐步具体介绍该控件的使用方法。本文仅适用于具有一定Axure使用经验的用户阅读。

1 定义Repeater元素

  • 01

    在页面中添加Repeater控件,添加后默认效果如下图:

  • 02

    双击编辑控件,并按下图所示,为Repeater添加内容,并为各个组件命名:

  • 03

    此时,返回到Home页看到的效果如下(其中的数字1、2、3是默认值,暂时不用理会):

2 为Repeater添加数据

  • 01

    从上图可以看到Repeater的框架已经显示出来了,但里面的内容还没有,下面我们开始为中继器添加内容; 打开中继器编辑界面,点击页面下部的小三角,打开Repeater 属性窗口,如下图所示: 其中,Repeater Dataset就是中继器中的数据,这里默认的1、2、3就是之前预览界面中出现的数字。

  • 02

    按照上一节对图片、标签的定义,为中继器添加列值(列值最好与之前的定义一致)和数据,添加之后效果如下: 注意:由于头像是图片格式,但Axure并不支持输入图片路径的方式,因此图片需要在单元格中点击右键选择“导入图片”,只有这样图片才能正常显示。

3 绑定数据

  • 01

    Repeater的数据已经添加完成了,但你会发现此时在Home页预览Repeater仍然没有显示我们添加的数据,下面将介绍如果将我们添加的数据绑定到Repeater中。 在Repeater属性窗口中,点击“中继器项目交互”,显示默认内容:

  • 02

    修改ItemLoad用例的定义,修改参考下图所示: 注意:头像要选择“设置图像”动作,其他内容选择“设置文本”。这一步非常重要,如果设置不对,头像将不显示。

  • 03

    此时,返回到Home页预览Repeater就可以看到上述步骤中添加的数据内容了:

4 修改样式

  • 01

    至此,Repeater中最重要的部分已经定义完成,当然还可以对Repeater的样式进行简单调整,定义非常简单,请自行研究。下图为样式定义,供参考:

  • 02

    效果图如下:

    5 数据操作

    • 01

      经过上述步骤,你已经可以定义一个完整的Repeater控件,通过这种方式可以节省大量样式重复控件的添加工作。不过,这些只是Repeater基本的使用方法,其更大的价值在于可以动态添加、修改、删除数据。下面的内容属于Repeater进阶用法,供有需要的读者参考。当然,如果你的原型图中并不需要动态增删改数据的效果,那么有之前的知识也够用。

    5.1 添加数据

    • 01

      接上面的步骤,在Home页放置一个按钮,用于为Repeater添加数据:

    • 02

      为该按钮添加单击效果,当点击按钮时为Repeater添加一行数据,如下图: 注意: A. 这里每次只能添加1行,如果定义了多行数据,则点击按钮时会一次性添加多行。 B. 每次点击按钮时添加的行数据是相同的,如果想要添加不一样的数据,则需要配合其他的方法,此处不做说明。

    • 03

      预览Home页,每点击1次“添加行”按钮就可以在Repeater中添加1行:

    5.2 修改数据

    • 01

      打开Repeater编辑界面,定义“修改”按钮的点击事件,实现点击该按钮修改该行description字段的功能,定义如下图:

    • 02

      预览Home页,点击每行后面到“修改”按钮即可以修改该行description字段的值:

    5.3 删除单行数据

    • 01

      打开Repeater编辑界面,定义“删除”按钮的点击事件,实现点击该按钮删除该行的功能,定义如下图:

    • 02

      预览Home页,点击每行后面到“删除”按钮即可以删除该行数据。

    5.4 删除多行数据

    • 01

      如果需要选择多行然后批量删除,可以使用checkbox控件,并配合Mark Rows进行删除,步骤如下。 Repeater中行首增加一个checkbox控件,并定义该控件的状态改变事件,实现当选中checkbox时标记该行,取消选中时取消标记该行,定义如下图:

    • 02

      在Home页中增加“删除选中行”按钮,并定义该按钮的点击事件,实现点击该按钮可以删除checkbox被选中的行,定义如下图:

    • 03

      预览Home页,点击“删除选中行”按钮即可以删除多行数据。

    (0)

    相关推荐

    • C# TabControl控件的用法

      TabControl控件是一个标签页控件,在实际编程中经常用到,该控件可以显示多个标签页来达到显示效果.本文介绍下该控件的一些常用用法. 操作方法 01 Name属性:Name属性标识该控件的名称,这 ...

    • C#如何使用文件操作控件 [打开文件/保存文件]

      在C#编程中,经常会有对文件的一些操作,这些操作都可以用C#的文件控件来很方便的搞定,这些控件就是[OpenFileDialog]打开文件对话框控件和[SaveFileDialog]保存文件对话框控件 ...

    • MATLAB GUI教学视频9:菜单控件menu的基本用法

      MATLAB GUI教学视频9:菜单控件menu的基本用法 步骤/方法 01 MATLAB GUI教学视频9:菜单控件menu的基本用法

    • MFC中Silder控件及定时函数SetTimer的用法

      在MFC的对话框中可以插入一些控件,其中Silder就是常用之一.下面记录了Silder控件的常用操作 步骤/方法 01 设置最大值和最小值 通过函数SetRange来完成,例如:m_Slider.S ...

    • C# Menustrip控件的常用属性用法详解

      操作方法 01 Name属性:该属性是指示控件的名称,便于访问控件或者是获取控件的值.一般以Mes为前缀. 02 AllowDrop属性:指示是否可以拖拽控件的值,默认设置为True,设置为False ...

    • ComboBox控件用法总结

      操作方法 01 1.改变下拉框大小:先点向下的箭头,就可以调整下拉框大小.2.如果 ComboBox 的 Sorted 属性设置为 true,则新添加项将按字母顺序插入到列表中.否则,在列表的结尾处插 ...

    • Axure怎么设计网页中拖拽控件上下排序的模块?

      Axure设计网页圆形的时候,想要实现控件拖拽的上下排序,我们可以通过中继器实现,局限性在于仅能往上拖拽排序,往下无法排序,下面我们就来看看详细的教程. 看似一个复杂的效果,实现起来发现也挺简单的,经 ...

    • 软件设计中那些最基础的控件元素!

      控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题.文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收! 一.现实世界的控件 " ...

    • C#如何使用分页控件[tabControl]

      本节介绍tabcontrol的用法: 方法/步骤1 01 打开Microsoft Visual Studio 2010, 新建名字为[tabcontrol]的程序. 02 在新程序界面空白窗口上放置合 ...