![Axure RP 8.0中文版原型设计从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/334/27563334/b_27563334.jpg)
5.2 唯一选中项
案例描述
单击每一个金额矩形框时,当前矩形变为红色背景和白色字体,其他按钮恢复白色背景与黑色字体,如图5-11所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P86_6716.jpg?sign=1734399367-jM8vpzDqUbrCHsV1lPkQU7c51GcALB27-0-c84ab8b4319d3e6c8912948f63f929f3)
图5-11 唯一选中项
思路分析
- ▷ 矩形有两种状态与样式,可以通过元件的交互样式来实现。
- ▷ 单击矩形时,通过设置当前的元件为被选中的状态使其改变背景颜色。
- ▷ 只允许有一个按钮呈现被选中的样式,可以通过给所有按钮元件设置选项组名称来实现效果。
操作步骤
(1)选择“文件”|“新建”命令,新建一个Axure的文档。
(2)在“元件库”面板中将“矩形1”元件拖入编辑区中,在工具栏中设置x和y坐标分别为80和60,“宽度”和“高度”分别为90和45,双击“矩形1”元件进入编辑状态,输入“10元”,如图5-12所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P86_6751.jpg?sign=1734399367-kWfXwtpORvr1E6xukTXvbuAWFZTSX8s3-0-b6b7fc087718f84d60330aa4c61de7bd)
图5-12 矩形效果
(3)在右侧“样式”面板中单击“边框”区域的“线条颜色”下拉三角按钮,在弹出的颜色面板中选择灰色(#CCCCCC)色块设置边框颜色,在“圆角半径”右侧文本框中输入10,如图5-13所示,设置圆角矩形。
(4)在编辑区中选择矩形元件,在右侧“属性”面板中的“交互样式设置”区域单击“选中”超链接,如图5-14所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P86_6734.jpg?sign=1734399367-GBv5GYydvju9ZYpokNPQ0PFqpmZRW1xI-0-000ee48af360076d5242673b9059a125)
图5-13 “样式”面板
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P86_6741.jpg?sign=1734399367-VUGk6Avn8y05EsL8RAO4TdsBnDoF51RF-0-bdd36293c4c5bdcc4b399ae110f1ec0f)
图5-14 “属性”面板
(5)在弹出的“交互样式设置”对话框中选中“字体颜色”复选框,单击“字体颜色”下拉三角按钮,在弹出的颜色面板中选择白色(#FFFFFF)色块;选中“填充颜色”复选框,单击“填充颜色”下拉三角按钮,在弹出的颜色面板中选择红色(#FF3300)色块,如图5-15所示,单击“确定”按钮返回至编辑区中。
(6)在“属性”面板中设置选项组名称为Price,如图5-16所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P87_6769.jpg?sign=1734399367-RclIHeKTpuKZpHmuncx0GGncyUJEBmo0-0-929124aa0e599dc64538bcfa3e205e39)
图5-15 “交互样式设置”对话框
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P87_6775.jpg?sign=1734399367-VdCfrrllE9u0FDhVDi5QXK5TMzqPa2Ce-0-5adb529e39c604aefef17b9b2eeecdd9)
图5-16 设置选项组名称
(7)在“属性”面板中单击“添加用例”超链接,弹出“用例编辑<鼠标单击时>”对话框,在左侧“添加动作”区域选择“选中”选项;在右侧“配置动作”区域选中“当前元件”复选框,如图5-17所示,单击“确定”按钮返回至编辑区中。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P87_6786.jpg?sign=1734399367-xkH5VgtdYR0qKzY0b73ePqch6lbYg31X-0-1a820227ad27da69b4c0fbd8192b7cba)
图5-17 “用例编辑<鼠标单击时>”对话框
(8)选择矩形元件并按住Ctrl键拖动,复制8个相同的矩形,并分别输入“20元”“30元”“50元”“100元”“200元”“300元”“500元”“其他金额”,如图5-18所示。
(9)按Ctrl+S快捷键,以“5.2”为名称保存该文件,然后按F5键预览效果,如图5-19所示。
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P88_6799.jpg?sign=1734399367-BFFFnA7e0n9y3t0ZSvYJS6RkfwqmyINy-0-600afc91020d29791348aee561d0c352)
图5-18 复制矩形元件
![](https://epubservercos.yuewen.com/3DA301/15825992405222006/epubprivate/OEBPS/Images/Figure-P88_6806.jpg?sign=1734399367-2kH45AN6VypAXLSm90c4P5cDFwkLVgk0-0-3dfb6862b23de0c0e0e8f75581f89cdb)
图5-19 最终效果