Axure教程——多选穿梭框

穿梭框是系统中常用的选择器，它可以从一堆选项中选出所需要的选项。那今天我们讲一下在Axure中如何制作高保真的多选穿梭框的原型模板。

制作完成之应具备以下交互效果：

可选栏目和已选栏目都可以通过模糊搜索快速查询选项

原型地址：

一、用中继器制作选择器

我们先做左边的选择器，用中继器来制作选择器，中继器内部默认自带一个矩形元件，我们按需求修改矩形的样式、和尺寸，我们需要注意的是要增加一个选中的交互样式，这样就可以通过选中变色看出已经选中了设么选项。

在中继器表格里，默认自带一列column0，在这列里我们填写选项名称，然后在底部加个边框矩形，完成后如下入所示：

然后我们在中继器增加1列，xuanzhong列，默认为空即可。这列的作用就是用于记录哪些选项被选中，我们这里制定一个规则，如果对应该xuanzhong列的值等于1就是被选中，否则就没有被选中。

所以我们要在中继器每项加载时添加交互，如果选中列的值等于1，我们就用设置选中的交互，将该行选项矩形设置为真。

那如果鼠标单击选项时，我们分两种情况添加交互，如果该行xuanzhong列的值=1，那么相当于从选中变成未选中，我们直接更新当前行的xuanzhong的值为0即可；如果该行xuanzhong列的值不等于1，那么相当于从未选中变成选中，我们直接更新当前行xuanzhong列的值为1。

。

完成之后我们还要增加一列xianshi，这列的作用是控制对应行内容是否显示。我们在中继器每项加载时增加判断条件，如果显示列的值不等于1，那么我们就用隐藏事件，隐藏该行选项。

二、制作模糊搜索效果

我们用一个输入框和搜索按钮，制作一个搜索框，如下图所示：

三、复制出已选栏目

上面我们做好左边未选栏目的元件后，可以将中继器和搜索框各复制一个到右面。复制到右面的的中继器里的xianshi列默认值要改成0，因为右面默认是没有选项的。

四、左右按钮穿梭的交互

右边的中继器我们把xuanzhong列=1的行对应的xianshi列的值设置为1，那右边中继器选中的行就会自动显示。最后我们还要把两个中继器里xuanzhong列的值恢复设置为0。

那左键头其实也是一样的道理，只不过是从原来将左边选中的选项传递到右边，变成从右边选中的选项传递回左边。

简单来说就是更新右面已选中行的xianzhi列值为0，这样就可以在右边的中继器里隐藏该选项；最后再更新左边中继器里选中行的xianzhi列值为1，这样就可以在左边显示了。

那么以上就是Axure高保真原型——多选穿梭框的制作教程了，感谢您的阅读，我们下期见，88~

本文由@Axure高保真原型原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，基于CC0协议

很赞哦!（90）