【Axure教程】中继器间图片的传递

中继器在Axure中可以作为图片保存的数据库，在实际系统中，我们经常需要将选择数据库的图片添加到其他图片列表中，所以今天就教大家，怎么在Axure中实现中继器之间的图片传递，包含将一个中继器中的图片列表传递到另一个中继器列表，已经传递后怎么在图片列表中删除对应的图片。

【原型效果】

1、点击图片列表的加号可以显示图片选择器，选择里面的图片；

2、选择图片后点击添加按钮，可以将该图片添加到图片列表；

3、鼠标移入图片列表的图片，会显示删除按钮，点击可以删除该图片；

【原型预览含下载地址】

https://axhub.im/ax9/ca3dd539f46dc856/#g=1&p=添加和删除图片

【制作教程】

1.材料准备

1.1主图片列表

主图片列表我们用中继器来制作，在中继器表格里放一张+号的图片、矩形、删除图标，如下图所示：

其中删除按钮和灰色透明矩形的组合默认隐藏、背景矩形需要增加鼠标移入和选中的样式。

中继器设置成网格显示，水平布局，案例中每行展示4张图片增加适当的行距和列距。

中继器表格里需要增加两列，no列暗顺序123456填写，pic列鼠标右键导入默认的图片

1.2副图片选择列表

副图片选择列表组合主要有矩形、文字、中继器图片列表、图标和按钮组成，如下图所示摆放

中继器图片列表和上面中继器一样，在中继器里放置图片元件和背景矩形，背景矩形需要增加鼠标移入和选中的交互样式，其他布局和上面主图片列表的中继器一致

表里需要两列，picture导入默认图片，biaoji列为空，后续用于逻辑交互

如果图片列表太多，超过了背景矩形的话，我们可以把中继器转为动态面板，调出滚动条并调整动态面板的尺寸。

整个组合转为动态面板，后续可以根据需要固定在屏幕某个位置，或者实现拖动摆放的效果。

2.交互制作

2.1设置图片

两个中继器里的图片，我们都要设置到对应的图片元件里，如果是Axure10或以上的版本，我们点击中继器表格里的连接按钮，选择对应的元件即可；如果是Axure9或以下的版本，我们就要写交互来实现了，在中继器每项加载时，我们用设置图片的交互，将picture列的值设置到对应的图片元件里即可。

2.2主图片列表删除图片

鼠标移入图片组合时，我们要先判断，这个是已经导入了图片的内容还是，+号图片，如果pic列没有内容，就是默认的加号图片；如果有已导入的图片，就用显示的交互，显示删除按钮和灰色透明矩形的组合，鼠标单击删除按钮时，用删除行的交互删除当前行即可，鼠标移出图片组合时，用隐藏的交互，隐藏删除按钮和灰色透明矩形的组合即可。

2.3主图片列表添加图片

我们先定义副图片选择列表的规则，如果biaoji列的值等于1，背景矩形就选中变色，这样我们就可以知道哪个图片被选择了；如果biaoji列的值等于2，就要将这张图片传递到主图片列表里。

鼠标单击+号图片时，我们用显示的交互把副图片选择列表的动态面板显示出来

鼠标单击副图片选择列表里的某张图片时，我们要让他选中变色，我们用更新行的交互，将当前行baioji列的值设置为1，这里我们还需要考虑到有没有其他图片选中，所以我们在更新之前，先把所有行的biaoji列的值先清空，这里我们可以用标记所有行，然后将所有行biaoji列的值设置为0，在更新当前行biaoji列的值等于1。

鼠标点击添加按钮时，我们用更新行的交互，将biaoji列里值等于1的行更新为2，这样就可以将图片传递到主图片列表的中继器里。因为我们想新添加的图片出现在第一张，所以我们对no列先进行排序，按123456从小到大升序排列，所以我们在添加行的时候，no列的值填写0，就是最小的，会自动出现在最前面。然后再用更新行的交互，将主图片列表里no列的值在他原来的基础上+1，相当于0的会变成1、1变成2……这样后续添加的图片都会出现在最前的位置。

2.4副图片关闭时的交互

这里考虑到选中的图片的背景会变色，所以在关闭的时候，要将他还原成透明，我们先标记所有行数据，然后用更新行的交互，将所有行biaoji列的值更新为0，最后用隐藏的交互，隐藏动态面板即可。

这样我们就完成了中继器间图片的传递的原型模板了，后续使用也是很方便，默认的图片内容只需要在中继器里导入，即可自动生成的交互效果。

以上就是本期教程的全部内容，感谢您的阅读，我们下期见。