温馨提示：阅读此篇文章内容，需要具备中继器基础操作能力。

标题可能不太容易看懂，大家看张图就明白了。

看了上面这张图，相信大家已经明白，我们要做的交互了。

这个交互我们先来分析一下，用户都做了什么？我们给用户什么样的反馈？

接下来，我们准备元件。

这里，我只标注与交互相关的主要元件。

为了让大家看清楚各个元件的用途与内容，我在两侧列表中显示了一些数据。

实际上，这两个列表里面的内容应该是一样的，都有相同数量的列表项数据内容，只是有条件的进行显示列表项。

这个条件，是在数据集中添加了一列数据“IsShow”，来进行控制的。

在中继器元件的载入时，我们要添加一个【添加筛选】到当前中继器的动作，这个筛选动作的条件就是“IsShow”这一列的列值为“True”。所以，在浏览器中只会显示部分列表项（画布中不会有实时的变化）。

注意：初始状态下，左侧列表所有列表项全部显示，而右侧列表应该是空的。也就是说，左侧中继器数据集中“IsShow”这一列的数据都为“True”，右侧中继器数据集中“IsShow”这一列的数据都为False。

接下来，我们就根据刚才分析出来的交互内容，制作这个案例。

1、鼠标点击任何一个列表项时，我们都要让列表项改变颜色；再次点击列表项时，恢复默认颜色。

列表项有默认颜色和选中时的颜色，默认颜色在样式中直接设置，选中时的颜色我们需要在属性中设置【选中】的交互样式。

然后，我们再通过交互动作改变元件的选中状态，从而实现样式的改变。

2、列表项改变颜色的同时，要让软件标记被点击列表项对应的数据行；恢复默认颜色时，让软件取消标记。

列表项颜色的改变，是在选中状态改变时触发的。那么，在选中状态改变时，我们也可以进行标记的动作。【选中】时【标记行】，标记当前所在中继器的【This】行。也就是与被点击的列表项相对应的数据行。

而当我们再次点击同一个列表项，选中状态会发生改变，这个时候，我们还要进行【取消标记行】动作的设置。

注意：矩形的触发事件【选中时】和【取消选中时】在【更多事件】中选择。

在这一步完成之后，还要再添加一些交互。就是让右侧列表中相应的列表项也被标记和取消标记。

我们修改【选中时】的【标记行】动作，再勾选另外一个中继器元件，标记范围选择【条件】，在条件中我们输入表达式“[[TargetItem.ListItem==Item.ListItem]]”，表达式的含义是当前中继器列表项的数据行中“ListItem”列值与被勾选的目标中继器列表项的数据行中“ListItem”列值相同，符合这个条件的数据行将被标记上。

接下来，【取消选中时】我们同样要在【取消标记行】的动作中，对另外一个中继器进行标记的同步。

3、点击添加到右侧的按钮时，清除左侧被标记的列表项；右侧列表添加左侧标记的列表项；取消左侧列表所有标记。

点击添加到右侧的按钮“ToRight”时，要将左侧列表中被标记行的“IsShow”列的列值更新为“False”。并且，将右侧列表中被标记行的“IsShow”列的列值更新为“True”

我们在按钮“ToRight”的【鼠标单击时】添加【更新行】的动作，更新中继器“LeftLsit”中【已标记】的行，然后选择列为【IsShow】，列值改为“False”。

然后，在刚才的动作中，再勾选中继器“LeftLsit”，更新【已标记】的行，然后选择列为【IsShow】，列值改为“True”。（参考上一个操作，只是最后的值不一样。）

最后，再添加一个【取消标记行】的动作，取消两个中继器中【全部】的标记。

当完成上一步操作之后，我们就已经实现了，将左侧列表项向右侧列表中添加的效果。

而从右侧列表中移除列表项的操作，实际上和刚才实现的交互是一样的，只不过是在不同的元件上再做一遍相同的交互，大家参考刚才的操作过程，就能够完成。

本教程案例源文件下载，请关注本站微信订阅号“iaxure”（产品经理班），在往期回顾中找到此篇文章，末尾即有下载地址。

~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作，倾力打造Axure RP 8精品课程系列，以最短的时间高效完成学习目标，入门进阶与实战案例并重，是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】

转载请注明：Axure原创教程网 » 列表选项添加至其他列表