中继器入门教程 如何高效制作与使用列表

中继器（Repeater）是现代UI/UX设计工具（如Axure、Figma等）中的一个核心功能，它允许设计师通过数据集快速生成和交互式管理重复的列表或内容块。无论是制作商品列表、用户信息卡片，还是动态表格，中继器都能极大提升设计效率和原型保真度。本教程将带你从零开始，掌握中继器的基本概念与列表制作流程。

一、 什么是中继器？

你可以把中继器想象成一个智能的“模板工厂”。它由两部分构成：

1. 数据集：一个类似表格的数据源，每一行是一条记录，每一列是一个属性（例如：姓名、价格、图片链接）。
2. 项模板：一个设计好的视觉单元，用于展示数据集中的一条记录。你可以将数据集的列“绑定”到模板中的具体元素（如文本框、图片框）上。

当你修改数据集或为模板添加交互时，所有基于该模板生成的项都会自动同步更新。

二、 制作一个基础列表的步骤

我们以制作一个简单的“产品列表”为例。

步骤1：创建中继器并设计项模板
1. 在画布上放置一个“中继器”元件。
2. 进入中继器内部，你会看到一个默认的矩形项。这就是你的“模板”。
3. 设计这个模板：例如，放入一个图片框（用于产品图）、两个文本框（用于产品名和价格），并排版美观。

步骤2：填写数据集
1. 选中中继器，在属性面板中找到“数据集”。
2. 默认有3列（Column0,1,2）和3行数据。你可以：
* 修改列名：双击列名，改为更有意义的名称，如 productImage, productName, price。

• 添加行/列：点击“+”按钮。

• 填写数据：在单元格中直接输入。对于图片列，可以填入图片文件的路径或URL。

步骤3：将数据绑定到模板元件
这是最关键的一步，让数据“活”起来。

1. 选中模板内的图片框，在属性面板中，找到“图像”设置，选择“值”为“中继器/数据集”，然后在下拉菜单中选择对应的列（如 productImage）。
2. 同理，选中产品名文本框，在文本属性中，选择“值”为“中继器/数据集”，并绑定 productName 列。为价格文本框绑定 price 列。

完成绑定后，你会发现中继器自动生成了与数据行数相同的多个项，并且每个项都正确显示了对应的数据，一个基础的列表就诞生了。

三、 常见交互与进阶技巧

静态列表只是开始，中继器的强大在于交互。

• 排序：可以为中继器添加交互，例如“点击价格标题时，按价格升序/降序排列列表”。这通常通过“添加排序”动作，并指定排序的数据列来实现。
• 筛选/搜索：可以设置条件，只显示符合条件的数据行。例如，创建一个搜索框，输入文本后，触发中继器“添加筛选”，规则为“productName 包含搜索框文字”。
• 动态新增/删除项：通过交互，向数据集“添加行”或“标记行/删除已标记行”，可以模拟用户添加购物车或删除列表项的效果。
• 分页与布局：调整中继器的布局属性，可以设置为“水平”或“垂直”流动，并设置每页项数，轻松实现分页效果。

四、 最佳实践与注意事项

1. 规划先行：在动手前，先规划好数据集需要哪些列，模板需要哪些元件，做到心中有数。
2. 命名清晰：为数据集列、模板内的元件都起一个清晰易懂的名字，便于后续绑定和交互设置。
3. 样式复用：善用“样式”功能。为模板中的文本框设置好默认样式（如字体、颜色），这样新增的项会自动继承，保持视觉统一。
4. 从简开始：先实现基础的数据显示，再逐步添加排序、筛选等复杂交互，一步步调试。

###

掌握中继器，是迈向高保真、可交互原型设计的关键一步。它打破了静态设计的局限，让你能模拟真实的数据驱动界面。开始时可能会觉得步骤繁琐，但一旦熟悉其“数据-模板-交互”的核心逻辑，你将能快速构建出复杂而逼真的列表、目录、仪表盘等界面，极大地提升设计沟通与测试的效率。现在，就打开你的设计工具，创建一个中继器，开始你的列表制作之旅吧！