Axure 9 实战案例，交互事件的应用 2，APP列表单选限制

前言

Hello！欢迎来到Axure 9 实战案例教程专栏。

上一篇教程，我们讲解了如何绘制APP列表页多选效果（点击查看），那么单选效果又如何绘制呢？本篇课程我们就来学习一下，选中事件的应用，如何绘制APP列表页单选限制效果。

完成效果图

我们先来看看完成效果图，大家可以看到APP列表单选限制效果主要组成包括：
①点击矩形时，显示选中状态；
②再次点击矩形时，取消选中状态；
③切换矩形时，选中当前元件，并取消选中其他元件；
④选中任何一个矩形时，启用完成按钮；
⑤没有选中矩形时（默认时），禁用完成按钮。

APP列表页初稿

为了节省时间，我们提前把列表页初稿准备好了（与上一篇多选列表页有少许不同），下面就来给大家讲解一下，如何设置单选限制的步骤。

第一步：设置元件的交互样式

首先选中全部矩形，在右侧栏的交互中，点击<添加类似"鼠标悬停"的交互样式>，再点击<元件选中的样式>，设置元件选中的样式；然后选中完成按钮，同样点击<添加类似"鼠标悬停"的交互样式>，再点击<元件禁用的样式>，设置元件禁用的样式（完成按钮属于带链接的元件，所以这里我们要使用元件禁用样式）。

选中全部矩形，点击<添加类似"鼠标悬停"的交互样式> 再点击<元件选中的样式> 设置元件选中的样式 选中完成按钮，同样点击<添加类似"鼠标悬停"的交互样式> 再点击<元件禁用的样式> 设置元件禁用的样式

接着（继续选中完成按钮）点击新建交互，再依次点击载入时启用禁用当前元件，设置为禁用。

接着点击新建交互_载入时_启用禁用_当前元件，设置为禁用

这一步的几个交互，与上一篇教程的第一步类似，基本属于是准备工作，从第二步开始才是入正题（单选限制效果）。

第一步完成按钮上的交互

第二步：设置点击选中的效果

这一步与上一篇教程的第二步，也很类似。首先选中第一个矩形，在右侧栏中，依次点击新建交互单击时设置选中_当前元件，设置到达菜单为切换；然后在右侧栏中点击单击时，按Ctrl+C（将单击时的交互复制到剪贴板上），接着逐个选中其他矩形，再按Ctrl+V（将交互粘贴到其他矩形上）。

选中矩形1，在右侧栏中点击新建交互_单击时_设置选中_当前元件，设置到达为切换 按Ctrl+C复制单击时的交互 按Ctrl+V将交互粘贴到其他矩形上

这一步的交互是实现矩形的选中与取消选中：点击矩形时，能显示选中状态；再次点击时，能取消选中状态。

第一&二步其中一个矩形的交互

第三步：设置选中矩形的效果

首先仍然选中第一个矩形，在右侧栏中依次点击新建交互选中改变时启用禁用_完成按钮；然后点击选中改变时的启用情形，打开情形编辑窗，在弹窗上点击添加条件，再点击第一个下拉菜单，选择选中状态，其他菜单不变，直接点击确定关闭弹窗。

选中矩形1，点击新建交互_选中改变时_启用禁用_完成按钮 点击启用情形，打开情形编辑窗 在情形编辑窗中，点击添加条件，第一个菜单选择选中状态

接着双击右侧栏的交互，打开交互编辑器，在弹窗中（选中<选中改变时>）点击添加动作中的设置选中，再勾选矩形1、2、3、4、5、6、7、8、9，然后将所有矩形的到达修改为假。

双击交互，打开交互编辑器 在弹窗中点击设置选中，再勾选矩形1~9 修改所有矩形的到达为假

这里的交互是指，当点击当前矩形时，启用完成按钮，并取消选中其他矩形；但是同学们发现了没？取消选中的矩形竟然是1~9，包括了当前矩形。这是为了方便将该交互复制到其他矩形上，待完成复制粘贴后，我们才回过头来修正一下。

所以再接着我们选中<选中改变时>的交互，按Ctrl+C（将交互复制到剪贴板上），接着逐个选中其他矩形，再按Ctrl+V（将交互粘贴到其他矩形上）；然后逐个选中矩形1~9，将<设置选中>中当前矩形的交互错误。

将矩形1的交互复制到其他矩形，再错误<设置选中>中当前矩形的交互 第三步其中一个矩形的交互

第四步：设置取消选中矩形的效果

首先选中第一个矩形，在右侧栏中依次点击新建交互取消选中时启用禁用_完成按钮，设置为禁用。

选中第一个矩形，新建交互_取消选中时_启用禁用_完成按钮，设为禁用

接着点击取消选中时的启用情形，打开情形编辑窗，在弹窗中点击添加条件，第一个下拉菜单选择选中状态，最后一个下拉菜单选择假；然后点击8次加号，添加多8行条件，逐个点击第二个下拉菜单，分别修改为1、2、3、4、5、6、7、8、9。

点击启用情形，打开情形编辑窗 在弹窗中，点击添加条件，第一个菜单选择选中状态，最后一个菜单选择假 添加多8个条件，修改第一个菜单为矩形1~9

这里的交互是指，当取消选中所有矩形时（包括当前矩形），禁用完成按钮。最后我们选中<取消选中时>的交互，按Ctrl+C（将交互复制到剪贴板上），接着逐个选中其他矩形，再按Ctrl+V（将交互粘贴到其他矩形上）。

结语

其中一个矩形上的所有交互

OK了，通过前面四步操作，APP列表页单选效果就绘制完成了。如果你学习过上一篇教程，那本篇教程是不是容易好多了呢？如果你还有不理解的地方，可以下载文末的课件继续学习哦。

相关课件

为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。

课件整包材料：
https://item.taobao.com/item.htm?id=631599964711

（@默林如斯原创出品，未经许可，禁止转载，侵权必究）

转自《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！查看全部教程 >>