Axure教程 如何利用中继器实现列表数据添加案例

在Axure RP中，中继器（Repeater）是一个功能强大的交互式元件，常用于动态展示和管理列表数据。本教程将通过一个清晰的案例，手把手教你如何使用中继器实现列表数据的添加功能。

一、 理解中继器

中继器本质上是一个数据容器，你可以将它想象成一个简易的数据库表。它由两部分组成：

1. 中继器数据集：存储数据的表格，每一行代表一条数据，每一列代表一个字段。
2. 中继器项目：一个设计好的矩形组合，用于定义单条数据在页面上如何呈现。项目中的元件（如文本框、图片等）可以绑定到数据集的特定列，从而实现数据的动态加载。

二、 案例目标

我们将创建一个简单的“待办事项列表”。用户可以在输入框中输入新事项，点击“添加”按钮，该事项就会动态添加到下方的列表中。

三、 分步实现

步骤1：搭建基础界面

1. 从元件库中拖入一个中继器到画布上，并将其命名为 TodoRepeater。
2. 在中继器项目中，放置一个矩形（作为列表项背景）和一个文本标签（用于显示事项内容）。将文本标签命名为 ItemText。
3. 在中继器外部，放置一个单行文本框（命名为 InputField）和一个按钮（命名为 AddButton），用于输入和添加新事项。

步骤2：配置中继器数据集

1. 双击中继器，进入其编辑界面。
2. 在数据集区域，默认有一列 Column0。我们将其重命名为 TodoItem（右键列名选择“编辑列”）。
3. 可以先添加几行示例数据，例如：“学习Axure”、“完成原型设计”。

步骤3：绑定数据到项目样式

1. 在项目样式中，选中文本标签 ItemText。
2. 在右侧的“交互”面板中，找到“文本”属性，点击旁边的“更多事件”图标（或直接双击交互面板空白处）。
3. 在弹出的交互事件编辑器中，选择“设置文本”动作，目标元件选择 ItemText。
4. 在“设置文本为”的选项中，选择“值”，然后点击“fx”图标。
5. 在编辑文本的对话框中，插入变量或函数 [[Item.TodoItem]]。这表示将当前项目（Item）的 TodoItem 列的值显示在这个文本标签上。
6. 点击“确定”完成绑定。此时，画布上的中继器会立即显示你在数据集中添加的示例数据。

步骤4：实现“添加”按钮的交互逻辑

这是核心步骤，为 AddButton 按钮添加“鼠标单击时”的交互。

1. 选中 AddButton 按钮，在“交互”面板中点击“新建交互”，选择“鼠标单击时”。
2. 添加动作：添加行 -> 中继器 -> 目标选择 TodoRepeater。
3. 在配置“添加行”动作时，我们需要指定新增行的数据。点击“添加行”旁边的“配置动作”图标（或直接进入编辑）。
4. 在“添加行到中继器”的对话框中，点击“添加行”按钮。这会为新增的一行设置各列的值。
5. 对于 TodoItem 列，我们需要将它的值设置为输入框 InputField 中的内容。点击该列值下的“fx”图标。
6. 在编辑值的对话框中，插入变量或函数 [[LVAR1]]，然后在下方“局部变量”区域，点击“添加局部变量”。
7. 配置这个局部变量：

• 名称：保持默认或自定义（如 InputText）。

• 组件：选择 InputField。

• 属性：选择“文本”。

1. 这样，表达式 [[LVAR1]] 就代表了输入框的文本值。点击“确定”完成值设置。
2. （可选但推荐）在添加行动作之后，可以再添加一个“设置文本”动作，将 InputField 的文本清空，以提供更好的用户体验。

步骤5：预览与测试

1. 按 F5 键或点击工具栏的“预览”按钮，在浏览器中打开原型。
2. 在输入框中输入文字，例如“测试新事项”，然后点击“添加”按钮。
3. 观察下方的列表，新事项应该已经成功添加进去了。

四、 功能扩展与优化

• 数据验证：可以在按钮的交互逻辑前增加“条件”，检查输入框是否为空，如果为空则提示用户。
• 删除功能：可以在每个中继器项目中添加一个“删除”按钮，为其添加“鼠标单击时”交互，使用“删除行”动作，目标选择“This”（即当前项目所在的行）。
• 排序与筛选：利用中继器自带的“添加排序”和“添加筛选”交互，可以轻松实现按条件排序或筛选列表项。

五、 核心要点

• 数据存储：在中继器数据集中。
• 样式定义：在中继器项目中，通过绑定 [[Item.ColumnName]] 来动态显示数据。
• 数据操作：通过“添加行”、“删除行”、“更新行”等交互动作来修改数据集，中继器的显示会自动同步更新。

通过这个案例，你已经掌握了中继器最核心的“增删”操作。理解并熟练运用中继器，将极大提升你制作高保真、可交互原型的效率与能力。