Axure中继器教程及案例详解

Axure RP 是一款强大的原型设计工具，广泛应用于产品设计、UI/UX 设计及交互设计中。中继器（Repeater）作为 Axure 中的一个重要元件，以其强大的数据处理和动态交互能力，成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用，以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面，详细介绍中继器的使用方法和案例。

预览地址：https://1zvcwx.axshare.com

一、中继器基础

创建中继器

1. 拖入中继器：在 Axure 画布中，从元件库（Libraries）面板中的“通用（Common）”元件库中拖入一个中继器（Repeater）。
2. 编辑中继器内容：双击中继器进入编辑模式，可以添加或删除内部元件，如矩形、文本框、图片等。这些元件将作为重复项的基础模板。

设置中继器数据

1. 添加数据列：在中继器的“样式”面板中，通过“数据集（Dataset）”部分可以添加数据列，列名即为变量名。
2. 输入数据：在数据集表格中，可以输入具体的数据，每行代表一个数据项。

引用数据变量

在中继器内部，通过[[Item.varName]]的方式引用数据变量，其中varName是数据列的名称。例如，如果有一个名为“name”的数据列，则可以通过[[Item.name]]来引用。

二、中继器进阶

动态列表/表格

中继器可以将数据以列表或表格的形式展示，并支持自定义样式和布局。例如，可以制作产品列表、新闻列表等。

数据筛选和排序

中继器支持数据筛选和排序功能。通过设置筛选条件和排序规则，可以方便地查找和比较数据。例如，可以按价格从低到高排序产品列表。

数据编辑和删除

通过添加编辑和删除按钮，并设置相应的交互事件（如“更新行”和“删除行”），中继器允许用户修改和删除数据项。这可以模拟真实的数据操作流程。

三、中继器高级

分页控制

默认情况下，中继器不分页显示所有数据。为了优化用户体验和系统性能，可以对中继器进行分页。在“样式”窗口中，选中“分页”选项，并设置每页显示的项目数量和起始页。

合计

对于需要合计的数据（如财务报表、统计图表），中继器提供了便捷的计算方式。通过在表尾添加合计项，并使用Item.varName + target.text等表达式，可以实现数据的自动合计。

列表拖动

为了增加交互性，中继器支持列表拖动功能。这通常需要使用动态面板来实现。通过设置拖动开始、拖动过程中和拖动结束时的交互事件，可以模拟列表项的拖动排序效果。

列表滑动删除

列表滑动删除是移动应用中常见的交互方式。虽然 Axure 没有直接提供滑动删除的功能，但可以通过添加滑动手势的交互模拟来实现。例如，使用“拖动”事件结合“条件判断”和“删除行”操作，可以模拟滑动删除的效果。

表内修改

表内修改是指直接在表格中编辑数据项的内容。通过在表格中添加文本框等输入元件，并设置“失去焦点”时的交互事件（如“更新行”），可以实现数据的即时修改。

分页器控制

合计（包含自动合计/选中合计）

列表拖动

表内修改

中继器是 Axure RP 中一个功能强大的元件，它允许用户快速创建、展示和操作重复的数据项。通过掌握中继器的基础、进阶和高级应用，设计师们可以制作出更加真实和可靠的原型设计。无论是产品列表、新闻列表还是用户评论区，中继器都能提供便捷的数据处理和动态交互解决方案。希望本文的教程和案例能够帮助大家更好地理解和应用中继器。