前言
Hello！欢迎来到Axure 9 实战案例教程专栏。
上两个章节我们一起学习了基本元件的应用，与动态面板的应用，本章节我们来重点讲解交互事件的应用。本篇课程我们首先来学习一下，选中事件的应用，如何绘制APP列表页多选效果？
完成效果图
我们先来看看完成效果图，大家可以看到APP列表多选效果主要组成包括：
①点击圆形时，显示选中状态；
②再次点击圆形时，取消选中状态；
③选中任何一个圆形时，启用完成按钮；
④没有选中圆形时（默认时），禁用完成按钮；
⑤点击全选按钮时，选中全部圆形，按钮文本变为取消全选；
⑥点击取消全选时，取消选中全部圆形，按钮文本变回全选。
列表页初稿
为了节省时间，这里我们提前把列表页初稿准备好了，下面我们来给大家讲解一下，如何设置多选交互的步骤。
第一步：设置元件的交互样式
首先选中全部圆形，在右侧栏的交互中，点击<添加类似"鼠标悬停"的交互样式>，再点击<元件选中的样式>，设置元件选中的样式（我们可以事先在圆形内添加文本√，并设为白色，这样就可以实现勾选状态效果了，省去用动态面板实现的麻烦）。
然后选中完成按钮，同样点击<添加类似"鼠标悬停"的交互样式>，再点击<元件禁用的样式>，设置元件禁用的样式（完成按钮属于带链接的元件，所以这里我们要使用元件禁用样式）。
选中全部圆形，点击右侧栏的<添加类似"鼠标悬停"的交互样式>
再点击<元件选中的样式>
设置元件选中的样式
选中完成按钮，同样点击<添加类似"鼠标悬停"的交互样式>
再点击<元件禁用的样式>
设置元件禁用的样式
接着（继续选中完成按钮）点击新建交互，再依次点击载入时启用禁用当前元件，设置为禁用；然后选中全选按钮，设置为右侧对齐，再拉长元件的宽度，方便后面它能展示为取消全选。
接着点击新建交互_载入时_启用禁用_当前元件，设置为禁用
选中全选按钮，设置为右侧对齐，再拉长宽度
这一步的几个交互，基本属于是准备工作，从第二步开始才是入正题（多选交互效果）。
第一步完成按钮上的交互
第二步：设置点击选中的效果
首先选中第一个圆形，在右侧栏中，依次点击新建交互单击时设置选中_当前元件，设置到达菜单为切换；然后在右侧栏中点击单击时，按Ctrl+C（将单击时的交互复制到剪贴板上），接着逐个选中其他圆形，再按Ctrl+V将交互粘贴到其他圆形上。
选中圆形1，在右侧栏中点击新建交互_单击时_设置选中_当前元件，设置到达为切换
按Ctrl+C复制单击时的交互
按Ctrl+V将交互粘贴到其他圆形上
这一步的交互是实现圆形的选中与取消选中：点击圆形时，能显示选中状态；再次点击时，能取消选中状态。
第一&二步其中一个圆形的交互
第三步：设置选中圆形的效果
首先仍然选中第一个圆形，在右侧栏中依次点击新建交互选中改变时启用禁用_完成按钮。
选中圆形1，点击新建交互_选中改变时_启用禁用_完成按钮
接着点击选中改变时上的启用情形，打开情形编辑窗，在弹窗上点击添加条件，再点击第一个下拉菜单，选择选中状态；然后点击8次加号，添加多8行条件，逐个点击第二个下拉菜单，分别修改为1、2、3、4、5、6、7、8、9，最后修改匹配条件为匹配任何。
点击选中改变时的启用情形，打开情形编辑窗
在情形编辑窗中，点击添加条件，再设置第一个菜单为选中状态
接着添加多8个条件，设置第二个菜单为1~9、匹配条件为匹配任何
这里的交互是指，我们通过判断圆形的选中状态，来控制完成按钮的展示状态：当选中任何一个圆形时，启用完成按钮。
同样通过此交互，也能控制全选按钮的展示状态，因此我们可以将选中改变时的情形1，复制过来，复用其情形条件。
首先点击情形1，按Ctrl+C，再按Ctrl+V，复制粘贴多一个情形；然后点击第2个情形条件，打开情形编辑窗，修改匹配条件为匹配所有。
复制情形1为另一个情形
点击第2个情形条件，打开情形编辑窗，修改匹配条件为匹配所有
接着删除左侧栏交互中的启用禁用，再依次点击添加动作设置文本全选按钮，修改值为取消全选。
删除第2个情形的启用禁用交互，再点击添加动作
再点击设置文本_全选按钮，修改值为取消全选
这几步交互是指，当选中全部圆形时，全选按钮展示为取消全选。这里我们需要注意，当存在相似的情形条件时，并且条件要放在或者条件的上方，所以我们把第2个情形拖到上方，并修改下方的情形为情形2。
将并且条件拖到上方，再修改下方的情形为情形2
接着点击选中改变时，按Ctrl+C，将它的交互复制到剪贴板，再逐个选中其他圆形，按Ctrl+V，将交互粘贴到其他圆形上。
这一步的交互是实现完成按钮与全选按钮（在选中圆形时）的展示状态：选中任何一个圆形时，能启用完成按钮；选中全部圆形时，全选按钮展示为取消全选。
第三步其中一个圆形的交互
第四步：设置取消选中圆形的效果
这一步我们依然是通过判断圆形的选中状态，来控制完成按钮与全选按钮的展示状态，因此我们可以将选中改变时的交互，复制过来，复用它的情形条件。
首先点击选中改变时，右键选择复制（或按Ctrl+C）将交互复制到剪贴板上，然后点击新建交互，在下拉菜单中点击取消选中时的粘贴，将选中改变时的交互粘贴到取消选中时上。
将选中改变时的交互复制到剪贴板上
再点击新建交互，在下拉菜单中点击<取消选中时>的粘贴
接着点击取消选中时的情形1的情形条件，打开情形编辑窗，在弹窗中将最后的下拉菜单全部修改为假，再修改匹配条件为匹配任何；然后在左侧栏中点击设置文本的内容，修改值为全选。（这里的交互是指，当取消选中任何一个圆形时，全选按钮展示为全选。）
点击取消选中时的情形1，打开情形编辑窗
在情形编辑窗中，最后的下拉菜单全部修改为假，再修改匹配条件为匹配任何
修改设置文本的值为全选
再接着点击情形2的情形条件，打开情形编辑窗，同样最后的菜单全部修改为假，修改匹配条件为匹配所有；然后在左侧栏中点击启用禁用的内容，修改为禁用。（这里的交互是指，当取消选中全部圆形时，禁用完成按钮。）
点击情形2的情形条件，打开情形编辑窗
在情形编辑窗中，最后的下拉菜单全部修改为假，再修改匹配条件为匹配所有
修改为禁用
这里我们依然需要注意，当存在相似的情形条件时，并且条件要放在或者条件的上方，所以我们把情形2拖到上方。
最后点击取消选中时，按Ctrl+C，将它的交互复制到剪贴板，再逐个选中其他圆形，按Ctrl+V，将交互粘贴到其他圆形上。
这一步的交互是实现完成按钮与全选按钮（在取消选中圆形时）的展示状态：取消选中任何一个圆形时，全选按钮展示为全选；取消选中全部圆形时，禁用完成按钮。
第四步其中一个圆形的交互
第五步：设置点击全选的效果
首先选中全选按钮，在右侧栏中依次点击新建交互单击时设置选中_圆形1；然后点击启用情形，打开情形编辑窗，再点击添加条件，保持默认条件，直接点击确定。
选中全选按钮，点击新建交互
再点击单击时_设置选中_圆形1
点击启用情形，打开情形编辑窗
在情形编辑窗中，点击添加条件，保持默认条件，直接点击确定
接着双击左侧栏的交互，打开交互编辑器，在弹窗中点击添加目标，再勾选圆形1、2、3、4、5、6、7、8、9；然后点击选中情形1，在左侧栏的添加动作中，依次点击设置文本_全选按钮，修改值为取消全选。
双击交互，打开交互编辑器
在交互编辑器中，点击添加目标，勾选圆形1~9
然后点击选中情形1，再点击添加动作中的设置文本
在设置文本的下拉菜单中选择全选按钮，并修改其值为取消全选
这里的交互是指，我们通过判断全选按钮的文本，来确定圆形的选中状态：
①情形一，当按钮文本为全选时，点击按钮，则选中全部圆形，文本变为取消全选；
②情形二，当按钮文本为取消全选时，点击按钮，则取消选中全部圆形，文本变回全选。
所以我们接着添加这第二种情形，首先（保持打开交互编辑器）点击添加情形，打开情形编辑窗，在弹窗中点击添加条件，最后一栏修改为取消全选，再点击确定关闭情形编辑窗。
点击启用情形，打开情形编辑窗
在情形编辑器中，点击添加条件，再修改最后一栏为取消全选
接着在交互编辑器中，选中情形2，依次点击设置选中圆形123456789，修改所有圆形的到达为假；然后依次点击设置文本全选按钮（默认值为全选），再点击确定关闭交互编辑器。
选中情形2，再点击设置选中
在设置选中菜单中勾选圆形1~9，再修改所有圆形的到达为假
然后点击设置文本_全选按钮（默认值为全选），再点击确定关闭交互编辑器
第五步全选按钮的交互
结语
OK了，通过前面五步操作，好不容易将列表页多选效果绘制完成了。好了，以上就是本篇课程的全部内容，你学会了吗？如果有不理解的地方，可以下载文末的课件继续学习哦。
相关课件
为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。
课件整包材料：
https://item.taobao.com/item.htm?id=631599964711
（@默林如斯原创出品，未经许可，禁止转载，侵权必究）
转自《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！查看全部教程 >>
网友评论