前言
Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>
上一篇教程，我们讲解了如何绘制APP列表页多选效果（点击查看），那么单选效果又如何绘制呢？本篇课程我们就来学习一下，选中事件的应用，如何绘制APP列表页单选限制效果。
我们先来看看完成效果图，大家可以看到APP列表单选限制效果主要组成包括：
①点击矩形时，显示选中状态；
②再次点击矩形时，取消选中状态；
③切换矩形时，选中当前元件，并取消选中其他元件；
④选中任何一个矩形时，启用完成按钮；
⑤没有选中矩形时（默认时），禁用完成按钮。
为了节省时间，我们提前把列表页初稿准备好了（与上一篇多选列表页有少许不同），下面就来给大家讲解一下，如何设置单选限制的步骤。
第一步：设置元件的交互样式
首先选中全部矩形，在右侧栏的交互中，点击<添加类似"鼠标悬停"的交互样式>，再点击<元件选中的样式>，设置元件选中的样式；然后选中完成按钮，同样点击<添加类似"鼠标悬停"的交互样式>，再点击<元件禁用的样式>，设置元件禁用的样式（完成按钮属于带链接的元件，所以这里我们要使用元件禁用样式）。
接着（继续选中完成按钮）点击新建交互，再依次点击载入时_启用禁用_当前元件，设置为禁用。
这一步的几个交互，与上一篇教程的第一步类似，基本属于是准备工作，从第二步开始才是入正题（单选限制效果）。
第二步：设置点击矩形的交互
这一步与上一篇教程的第二步，也很类似。首先选中第一个矩形，在右侧栏中，依次点击新建交互_单击时_设置选中_当前元件，设置到达菜单为切换。
这一步的交互是实现矩形的选中与取消选中：点击矩形时，能显示选中状态；再次点击时，能取消选中状态。
第三步：设置选中/取消选中矩形的交互
首先仍然选中第一个矩形，在右侧栏中依次点击新建交互_选中_启用禁用_完成按钮，设置为启用。
接着继续点击新建交互_取消选中时_启用禁用_完成按钮，设置为禁用。
第四步：复制交互并设置选项组
首先选中第一个矩形的所有交互，按Ctrl+C（将矩形的所有交互复制到剪贴板上），接着逐个选中其他矩形，再按Ctrl+V（将交互粘贴到其他矩形上）。
然后，选中所有矩形，点击右键_选项组，设置组名称再点击确定；这里是利用选项组的特性，来实现选项的单选限制。
结语
OK了，通过前面四步操作，APP列表页单选效果就绘制完成了。如果你学习过上一篇教程，那本篇教程是不是容易好多了呢？如果你还有不理解的地方，可以下载文末的课件继续学习哦。
在线预览
效果图在线预览：https://u.pmdaniu.com/L8A5p
相关课件
为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。
课件整包链接：
https://item.taobao.com/item.htm?id=631599964711
链接长期有效。
（默林如斯原创出品，未经许可，禁止转载，侵权必究）
《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！点击了解课程简介>>
欢迎关注《产品经理知识与资源》专栏，这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库；2012年入行的原创实力保障！！点击前去关注>>
扫一扫
760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
