01-中继器

3698字约12分钟

2024-06-04

中继器元件-Axure教程

中继器用于显示布局一致的一组元件的重复模式，例如表格数据行或产品列表等布局。使用中继器元件时，您可以直接从中继器的数据集表中管理显示在每个重复模式实例中的内容。

默认元件库的动态部分中有两个可用的中继器元件示例：中继器表格和中继器卡片。两个中继器元件具有相同的功能。

您还可以通过选择并右键单击画布上已有的一组元件，然后在上下文菜单中选择“创建中继器”来创建中继器。

项目和数据集

中继器元件由两部分组成：“项目”，其中包含重复元件的集合，以及“数据集”，其中包含控制每次重复内容的数据表。

当您选择数据集中列名称下的连接元件时，存储在数据集中的文本和图像将显示在项目的元件上，然后从下拉列表中的可用元件列表中进行选择。

项目

重复的元件集合称为“项目”。您可以通过双击画布上或大纲窗格中的中继器来编辑项目中的元件。

在编辑项目时，您只会看到其包含的元件的一个实例。对于转发器数据集表的每一行，中继器项目中的元件集就会重复一次。

数据集

控制中继器项目重复的数据表称为“数据集”。单击中继器时会自动出现浮动数据集表，您可以通过单击并拖动右下角来拉伸浮动数据集。您还可以通过单击数据集表格右上角的折叠/展开图标来折叠数据集的内容。

中继器数据集中的数据决定了中继器项目每次重复中显示的不同内容。例如，默认库中的中继器表格元件以三行数据开始，每行包含不同的字段内容，这就是您在中继器显示的三个重复元件集上看到的内容。

您可以通过选择一个单元格并按CTRL+V(Windows)或CMD+V(Mac) 将来自 Microsoft Excel 和 Google Sheets 等电子表格应用程序的表格数据粘贴到中继器的数据集中。

在项目中显示数据

文字和图像

要在数据集单元格中输入文本，请选择该单元格并开始键入。或者，您可以双击单元格来编辑其现有文本。数据集单元格还可以保存图像文件。右键单击一个单元格并选择导入图像以打开计算机的文件浏览器，您可以从中选择所需的图像。

要将每个数据集列中的文本和图像显示到中继器项目中的元件上，请单击连接元件，然后从目标下拉列表中选择一个元件。

引用页面和 URL

数据集单元格还可以包含 URL 和对 RP 文件中其他页面的引用。以纯文本形式输入 URL。要保存页面引用，请右键单击单元格并选择引用页。在出现的对话框中，选择要为其存储引用的页面。

您可以使用 URL 和页面引用在中继器项目中的元件事件上创建打开链接交互 - 例如，按钮小部件的单击事件。在链接到下拉列表中选择链接到外部 URL，然后单击带有文本的文本字段旁边的fx图标。在出现的“编辑值”对话框顶部，单击“插入变量”或“函数”。在下拉列表的中继器部分中，单击Item.ColumnName，其中“ColumnName”是包含 URL 和页面引用的数据集列的名称。

单击确定关闭编辑值对话框。当您在 Web 浏览器中预览原型时，您现在应该能够通过您刚刚创建的交互导航到中继器数据集中引用的 URL 和原型页面。

导入数据

您可以通过选择数据集表格顶部的导入 CSV来从 CSV 文件导入数据。导入 CSV 文件时，列和行将根据需要自动添加到数据集中。导入 CSV 文件时，数据集中的现有内容将被覆盖。

特殊属性

布局、间距和分页

默认情况下，中继器的所有项目都是可见的，它们垂直排列在单列中，项目之间没有空格。您可以使用“样式”窗格的“布局”和“分页”部分中的选项更改此设置。

布局

在布局部分，您可以选择中继器的项目是垂直堆叠在一列中还是水平堆叠在一行中。如果您希望中继器分成多列或多行，请选中网格排布复选框并输入您希望每列或每行具有的项目数。

间距

您还可以在样式窗格的布局部分中指定中继器项目的行和/或列之间应该有多少空白空间。如果您为中继器设置了背景颜色，它将在此空白空间中可见。

分页

分页功能将其项目分成多个“页面”（不要与页面窗格中的原型页面混淆），这样您就可以控制一次可见的项目数量。

在样式窗格的分页部分，选中多页复选框。输入您希望在每页上显示的项目数，并输入您希望中继器开始的页数（默认为1）。您可以使用“设置当前页面”操作来浏览中继器的页面，并且可以使用“设置每页项目数”操作来动态更改每页的项目数。

边框、背景和填充

您可以使用“样式”窗格中的“填充”、“边框”和“角半径”选项为中继器添加边框和背景颜色。中继器边框和背景呈现在中继器项目中的元件底部，因此您可能需要向中继器添加填充才能看到它们。“样式”窗格的“填充”部分中的选项允许您在中继器的外边缘与其项目之间创建空白空间。

中继器项目也可以有自己的背景颜色，不同于中继器本身的背景。您可以在“样式”窗格的“背景颜色”部分中选择此颜色。此外，您可以选中交替复选框以选择将应用于所有其他项目的第二种颜色。在使用中继器元件构建表格时，此选项很方便。

适应 HTML 中的内容

在适应 HTML 中的内容复选框位于上述样式面板中的数据集部分，默认情况下启用。启用此选项后，每个中继器项目将自动调整大小以适应其包含的元件。

如果禁用此选项，则每个中继器项目将保持固定大小，无论其包含的元件的大小、位置或可见性如何更改。如果动态移动或显示的元件延伸到其自身项目的固定边界之外，则它们可能会与其他中继器项目重叠。

取消单选按钮组和选项组效果

默认情况下，中继器项目中的单选按钮组和选项组分别针对项目的每个实例进行设定。例如，如果某个项目有一个包含三个单选按钮的单选组，选择其中一个按钮将取消选择该项目实例中的其他两个按钮，但其它项目实例中的单选按钮不会受影响。

您可以通过取消选中位于交互窗格下部的取消单选按钮组和选项组效果的框来更改此行为。当这些选项被关闭时，中继器项目中的单选组和选择组会在项目的每个实例中进行评估。回到我们之前的示例，这意味着在项目的一个实例中选择单选组中的单选按钮将取消选择每个其他实例中该单选组中的所有其他按钮。

中继器遮罩

默认情况下，中继器有一个绿色边框遮罩，以使其包含的元件更容易与画布上的其他元件区分开来。您可以在应用程序菜单中的视图 → 遮罩中切换蒙版。

特殊交互

中继器特定事件

项目加载

作为使用连接元件选项的替代方法，您可以使用项目加载事件在中继器上显示内容。这种方法更高级，例如使用数学函数或表达式动态生成文本或数值时就需要用到。

对于在 Web 浏览器中加载的中继器项目的每个实例，项目加载事件都会触发一次。例如，对于数据集包含三行的中继器，该事件将触发 3 次，因为每行都会创建该项目的一个新实例。此外，项目加载事件始终按从上到下的顺序处理数据集行。

当页面第一次加载时，中继器加载它的所有项目，只要对中继器的数据集进行更改，它就会重新加载所有项目。这意味着项目加载事件在页面加载时以及每次添加、删除或更新数据集行时为项目的每个实例触发一次。

项目调整大小

每当中继器项目的一个实例改变其含有元件的大小时触发项目调整大小事件。这仅在中继器设置为自适应内容时发生。

排序和过滤行

排序

使用“添加排序”和“删除排序”动作，您可以按任何数据集列对中继器的行进行动态排序。您可以将列的值排序为以下任何数据类型：

数字
文本
文本（区分大小写）
日期 – YYYY-MM-DD
日期 – MM/DD/YYYY

您还可以选择按升序或降序对行进行排序，也可以在重新应用排序时在两者之间切换。

过滤

使用添加过滤和删除过滤动作，您可以动态过滤中继器以仅显示满足特定条件的行。您可以使用布尔表达式定义这些条件，这些表达式将一个值（通常是数据集列或其他中继器项目属性）与另一个值进行比较。一些简单的例子包括：

[[Item.State == 'CA']] 将仅显示 State 列中值为“CA”的行
[[Item.Price <= 20]] 将仅显示价格列中的值小于或等于 20 的行
[[Item.TasksCompleted != Item.TasksAssigned]] 只会显示其在 TasksCompleted 列中的值不等于它们在 TasksAssigned 列中的值的行