Axure设计之单选框教程（中继器）
在Axure RP中，通过结合中继器的强大功能，我们可以轻松实现动态加载的单选框列表，不仅可以根据数据自动调整选项宽度，还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目，包括案例分析、设计思路及详细的实现步骤。
一、案例分析
最终效果是一个动态生成的单选框列表，其中每个选项都通过中继器从数据中加载。每个选项显示不同的文本（xx：选项文本），并基于数据中（xz：选中状态）的值（1表示选中，0表示未选中）自动设置选中状态。同时，每个单选框的宽度会根据其显示的文本长度自适应调整，以确保用户界面的整洁与美观。用户点击任何单选框时，将更新数据中对应行的xz字段值，从而实时反映选中状态的变化。
预览地址：https://1zvcwx.axshare.com
二、设计思路
- 数据源准备：首先定义好中继器的数据结构，包括
id（唯一标识）、xx（选项文本）、xz（选中状态，0或1）。 - 中继器设置：使用中继器来动态加载这些选项，并为每个选项创建一个矩形（或按钮）作为单选框的视觉表现。
- 动态宽度调整：在中继器的“每项加载时”事件中，根据
xx字段的文本长度动态调整矩形的宽度。 - 选中状态设置：同样在“每项加载时”事件中，根据
xz字段的值设置矩形的选中状态（如改变背景色或边框颜色）。 - 交互事件：为每个矩形添加点击事件，当点击时更新中继器中对应行的
xz字段，并重新加载中继器以刷新所有选项的选中状态。
三、实现步骤
1. 创建中继器
- 在Axure画布上拖入一个中继器控件。
- 双击中继器进入编辑模式，设置其数据项为
id、xx、xz。 - 准备好数据，并设置中继器的数据加载方式。
2. 设计单选框样式
- 在中继器内部，为每个数据项创建一个矩形（或按钮）作为单选框。
- 为矩形添加文本字段，并绑定到
xx字段。
3. 动态宽度调整
- 在中继器的“每项加载时”事件中，添加“设置尺寸”操作。
- 使用“宽度”属性，并通过表达式动态计算文本长度对应的宽度（可能需结合字体大小、间距等因素进行调整）。
4. 选中状态设置
- 同样在“每项加载时”事件中，添加条件逻辑。
- 如果
xz字段的值为1，则设置矩形的选中样式（如改变背景色），如果值为0，则恢复默认样式。
5. 添加交互事件
- 为每个矩形添加“单击时”事件。
- 在点击事件中，使用中继器动作的“更新行”动作，将当前选项
xz字段更新选中状态的值，接着使用“更新行”动作，将数据中其他项xz字段更新为未选中状态的值。
通过以上步骤，你就能够使用Axure RP中的中继器控件创建一个动态加载、宽度自适应、实时更新选中状态的单选框列表了。这样的设计不仅提高了用户体验，也展示了Axure在原型设计领域的强大功能。