如何使用Axure中继器创建复杂的列表（一）

在上一篇，我们对中继器初步的介绍，接下来，我们便用它创建更为复杂的列表部件。

列表在众多应用中算是较为重要的一个组成部分，几乎随手打开个移动端的应用，都能够找到它的身影，例如：

列表示意

以上的列表，虽然代表不了全部产品的列表类型，但也差不太多。IOS的系统设置这类列表较为典型，也最为基础，列表的子单元包含有图片，文字，以及一些状态提示信息。而百度糯米虽然包含的元素更多，样式更复杂，但仍然是没有脱离IOS系统设置的那种结构。再看看今日头条的样式，虽然较为复杂，穿插了2种不同类型的显示，但也能看到是从IOS系统设置的影子，最后优酷的列表，虽然看起来和之前的3者都有所不同，它顶多算是IOS系统设置类型的变化体，在原型设计上只是比第二种稍稍增加了一些操作，处理方式还是一样的。

下面我就先教大家如何利用中继器实现以上的几种效果。

实例2：IOS系统设置页面的实现

我们打开之前在实例1创建的那个简单列表，选择在它的基础上进行修改。

首先我们先构造自己的基本部件，它看上应该是这个样子的：

部件的构造

接下来，我们对这个部件进行一些设置

设置部件

部件的命名与样式的基本调整

我们注意到，在IOS的系统设置中，会对不同类型的项目列表通过一个背景为灰的空白行做间隔处理，所以我们需要对列表名称这个矩形部件做一个效果，在该部件上点击右键，选择交互样式设置（Interaction Styles Setting）

对列表矩形添加选择效果

然后我们开始设置数据结构，并补填部分数据供展示：

数据的填写

对于在数据设置这里，我们怎么导入图片到Image列中，你可以在相应的位置，右键鼠标，就会出现导入图片的项。对于细心的读者可以看到，在数据源中，我们有2行并未添加任何数据，而这两行空白数据只是起间隔作用，所以并不需要有数据的录入。

做完这些，我们开始进行数据和各个部件之间的绑定。

数据和各个部件之间的绑定

这里需要特别提出的是，对于部件中的图片与数据源中导入的图片绑定，需要用到动作里面的set image方法。

列表项图标与数据源中的图片的绑定

其实，做到这里，基本上就能实现最基本的要求了，大家可以在这里点击预览（或F5）查看，但是还并没有到达我们想要的效果，我们缺失了2个地方的细节处理：1、对于飞行模式来讲，它只有开关项，并没有向右箭头；2、各个项目功能之间的间隔不是很明显，会让设计误认为是空项，所以接下来我们将这两个问题给他解决掉。

首先，我们先处理间隔的问题，在上面，我们曾对列表名称那个矩形做过一个交互样式的设置，现在在这里就会用到。

我们回到中继器的动作设置面板（Repeater Item Interactions）,在OnItemLoad下面加一个动作，用数据源中的Name作标识判断，如果Name值为空，则选中列表名称这个矩形部件，并将箭头这个额外的元素隐藏起来，具体如下：

增加显示空白列的动作

至此，关于间隔的问题我们有效的处理完成，接下来继续完成飞行模式开关的问题，我们先对之前创建的部件进行完善，补全缺失的关素。改变之后的部件应该是这样子。

中继器组件新增部件

然后，我们继续回到中继器的动作设置面板（Repeater Item Interactions），在OnItemLoad下面再增加新的一个动作，仍然用数据源中的Name作判断标识，如果Name的值等于“飞行模式”，则隐藏掉箭头这个部件，同时显示开关这个部件，最终的OnItemLoad下面的动作为：

增加飞行模式的开关按钮

这时候，我们遗留的问题已经得到解决，可以点击预览看看自己的成果了。

最终效果

有兴趣的朋友可以加我个人微信公众号（微信公众号：产品设计曹蜀黍），一起交流！

微信公众号：产品设计曹蜀黍