正文

Repeater Widgets

中继器部件

The repeater widget is an advanced widget type used to display repeating collections of text, images, and other elements. Repeaters are containers that hold a single set of widgets, called the "item," that is repeated several times on the page. Each repetition of the item can be different from the others, and the differences are controlled by data entered into the repeater's tabular "dataset."

repeater小部件是一种高级小部件类型，用于显示文本、图像和其他元素的重复集合。重复器是容器，其中包含一组称为“item”的小部件，在页面上重复几次。该项的每次重复都可能与其他项不同，这些不同是由进入中继器的列表“数据集”的数据控制的。

Because repeaters are data-driven, they can show dynamic sorting and filtering. Reach for a repeater when you need to demonstrate a dynamically sortable or filterable design, such as a dynamic table or list of products. Repeaters can take a lot of work to set up, though, so if your prototype doesn't require true dynamic sorting and filtering, you'll want to use regular widgets instead, such as the table widget.

因为中继器是数据驱动的，所以它们可以显示动态排序和过滤。当您需要演示动态可排序或可过滤的设计(如动态表或产品列表)时，请使用中继器。但是，设置重复器需要做大量的工作，因此，如果原型不需要真正的动态排序和过滤，则需要使用常规的小部件，比如table小部件。

The repeater widget is available in the Common section of the Default widget library. Drag it from the Libraries pane and drop it onto the canvas to add one to your design.

repeater小部件可以在 默认 小部件库的 Common 部分找到。从“ Libraries ”窗格中拖动它，并将其拖放到画布上，以便将它添加到您的设计中。

1、The Item and the Dataset

项和数据集

The repeater widget is made up of two parts: the "item" contains the collection of widgets that will be repeated, and the "dataset" contains the table of data that controls the appearance of each repetition.

repeater小部件由两部分组成:“item”包含将要重复的小部件集合，“dataset”包含控制每次重复外观的数据表。

Text and images stored in the dataset are displayed on widgets in the item via interactions under the repeater's Item Loaded event.

存储在数据集中的文本和图像通过中继器加载的 项 事件下的交互显示在项中的小部件上。

1.1、The Item

项

The collection of widgets that is repeated is called the "item." You can edit the widgets in the item by double-clicking the repeater on the canvas or in the Outline pane. While editing the item, you'll see only one instance of its contained widgets, and you can hide other widgets on the page by clicking Isolate at the top-right of the canvas.

重复的小部件集合称为“项”。您可以通过在画布上或在 Outline 窗格中双击repeater来编辑项目中的小部件。在编辑项目时，您将只看到其包含的小部件的一个实例，并且您可以通过单击画布右上角的** isolation **来隐藏页面上的其他小部件。

The widgets in the repeater's item are repeated once for each row of data in the repeater's dataset. For example, the repeater in the Default widget library starts with a single rectangle widget in its item and three rows of data in its dataset. This is why you see the rectangle repeated three times when you first drag the default repeater onto the canvas.

中继器项中的小部件对于中继器数据集中的每一行数据重复一次。例如， Default widget库中的repeater从其项中的单个矩形小部件和数据集中的三行数据开始。这就是为什么当您第一次将默认的中继器拖动到画布上时，会看到矩形重复三次。

1.2、The Dataset

数据集

The table of data that controls a repeater's item repetitions is called the "dataset." You can view and edit a repeater's dataset in the Style pane. To add a row or column to the dataset, click Add Column , Add Row , or use the icons above the table. You can also use these buttons to move and delete columns and rows, or you can do so by right-clicking the cells in the table.

控制中继器项重复的数据表称为“数据集”。您可以在“ Style ”窗格中查看和编辑中继器的数据集。若要向数据集添加行或列，请单击 添加列 ， 添加行 ，或使用表上的图标。您还可以使用这些按钮来移动和删除列和行，或者通过右键单击表格中的单元格来实现。

The data in a repeater's dataset are what determine the differences between the repetitions of the repeater's item. For example, the repeater in the Default widget library starts with three rows of data, each containing a number: 1 , 2 , and 3 . These are the numbers that you see printed on the repeater's three rectangle widgets on the canvas. (This linking is accomplished with an interaction, explained in the next section.)

中继器数据集中的数据决定了中继器项的重复之间的差异。例如， Default widget库中的repeater以三行数据开始，每一行都包含一个数字:' 1 '、' 2 '和' 3 '。这些是您在画布上看到的repeater的三个矩形小部件上打印的数字。(这种链接是通过交互完成的，下一节将对此进行解释。)

Tip
提示

You can paste tabular data from spreadsheet applications like Microsoft Excel and Google Sheets into a repeater's dataset by selecting a cell and pressing CTRL V (Windows) or CMD V (Mac).
您可以通过选择一个单元格并按 CTRL V (Windows)或 CMD V (Mac)将来自电子表格应用程序(如Microsoft Excel和谷歌工作表)的表格数据粘贴到中继器的数据集中。

1.3、Displaying Data in the Item

在项中显示数据

1.3.1、Text

文本

To enter text into a dataset cell, select the cell and start typing. Alternatively, you can double-click a cell to edit its existing text.

要在数据集单元格中输入文本，请选择单元格并开始键入。或者，您可以双击一个单元格来编辑它现有的文本。

To display dataset text on a widget in the repeater's item, use the Set Text action in the repeater's Item Loaded event. Select text in the Set To dropdown, and then click the fx icon to the right of the Value field.

要在中继器的小部件上显示数据集文本，请在中继器的加载 项的 事件中使用 Set text 操作。在 设置为 下拉列表中选择 text ，然后点击 Value 字段右侧的 fx 图标。

At the top of the Edit Text dialog that appears, click Insert Variable or Function . In the Repeater section of the dropdown, click Item.ColumnName , where "ColumnName" is the name of the dataset column containing your text. (If you're working with the default repeater, for example, you'll see Item.Column0 in the list.)

在出现的编辑文本对话框的顶部，单击 插入变量或函数 。在下拉菜单的 Repeater 部分，点击 项。ColumnName ，其中“ColumnName”是包含文本的数据集列的名称。(例如，如果您正在使用默认的中继器，您将看到 Item。列0 在列表中。)

Click OK to close the Edit Text dialog. The text from your chosen dataset column should now be displayed on the target widget in the repeater's item.

点击 OK 关闭 编辑文本 对话框。您选择的数据集列中的文本现在应该显示在repeater的目标小部件中。

1.3.2、Images

图片

Dataset cells can also hold image files. Right-click a cell and select Import Image to bring up your computer's file browser, from which you can select your desired image.

数据集单元格还可以保存图像文件。右击一个单元格并选择 Import Image 打开您的计算机的文件浏览器，您可以从中选择您想要的图像。

To display dataset images on an image widget in the repeater's item, configure a Set Image action under the repeater's Item Loaded event. Under Set Default Image , select Value in the dropdown and then click the fx icon to the right of the text field.

若要在中继器项中的图像小部件上显示数据集图像，请在中继器的加载 项的 事件下配置 Set image 操作。在 设置默认图像 下，在下拉菜单中选择 Value ，然后点击文本框右侧的 fx 图标。

At the top of the Edit Value dialog that appears, click Insert Variable or Function . In the Repeater section of the dropdown, click Item.ColumnName , where "ColumnName" is the name of the dataset column containing your image files.

在出现的 编辑值 对话框的顶部，单击 插入变量或函数 。在下拉菜单的 Repeater 部分，点击 项。ColumnName ，其中“ColumnName”是包含图像文件的数据集列的名称。

Click OK to close the Edit Value dialog. The images from your chosen dataset column should now be displayed on the target image widget in the repeater's item.

点击 OK 关闭 编辑值 对话框。您选择的数据集列中的图像现在应该显示在repeater的目标图像小部件中。

1.3.3、Reference Pages and URLs

Dataset cells can also hold URLs and references to other pages in the RP file. Enter URLs as plain text. To save a page reference, right-click a cell and select Reference Page . In the dialog that appears, select the page you want to store a reference for.

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

You can use URLs and page references to create Open Link interactions on widget events in the repeater's item — for example, a button widget's Click or Tap event. Select Link to external URL in the Link To dropdown, and then click the fx icon next to the text field with the https:// text.

您可以使用url和页面引用来创建 打开链接 在中继器项中的小部件事件上的交互—例如，按钮小部件的 单击或点击 事件。在指向 下拉列表的 链接中选择指向外部URL 的 链接，然后单击文本字段旁边的“https://”文本的 fx 图标。

At the top of the Edit Value dialog that appears, click Insert Variable or Function . In the Repeater section of the dropdown, click Item.ColumnName , where "ColumnName" is the name of the dataset column containing the URLs and page references.

在出现的 编辑值 对话框的顶部，单击 插入变量或函数 。在下拉菜单的 Repeater 部分，点击 项。ColumnName ，其中“ColumnName”是包含url和页面引用的数据集列的名称。

Click OK to close the Edit Value dialog. When you preview the prototype in the web browser, you should now be able to navigate to the URLs and prototype pages referenced in the repeater's dataset via the interaction you just created.

点击 OK 关闭 编辑值 对话框。在web浏览器中预览原型时，您现在应该能够通过刚才创建的交互导航到repeater的数据集中引用的url和原型页面。

2、Special Properties

特殊交互

2.1、Spacing, Layout, and Pagination

间距、布局和分页

By default, all of a repeater's items are visible, and they're laid out vertically in a single column with no blank space between items. You can change this with the options in the Spacing , Layout , and Pagination , sections of the Style pane.

默认情况下，中继器的所有项都是可见的，它们垂直放置在单个列中，项之间没有空格。您可以使用“ Style ”窗格中的“ 间距 ”、“ 布局 ”和“ 分页 *”中的选项更改此选项。

2.1.1、Spacing

间距

In the Spacing section of the Style pane, you can specify how much empty space there should be between the rows and/or columns of repeater items. If you've set a background color for the repeater, it will be visible in this empty space.

在“ Style ”窗格的“ 间距 ”部分，您可以指定repeater项的行和/或列之间应该有多少空白空间。如果你已经为中继器设置了一个背景色，它将在这个空白区域中可见。

2.1.2、Layout

布局

In the Layout section, you can choose whether the repeater's items should be stacked vertically in a column or horizontally in a row. If you would like your repeater to break into multiple columns or rows, check the Wrap (Grid) checkbox and enter the number of items you want each column or row to have.

在 Layout 部分，您可以选择中继器的项是垂直堆放在一列中还是水平堆放在一行中。如果您希望您的中继器分成多个列或行，请选中 Wrap (Grid) 复选框，并输入您希望每个列或行的项数。

2.1.3、Pagination

页码

Paginating a repeater breaks its items up into multiple "pages" — not to be confused with the prototype pages in the Pages pane — so that you can control how many items are visible at a time.

分页中继器将其项分成多个“页面”—不要与** pages **窗格中的原型页面相混淆—以便您可以控制一次可见的项数。

In the Pagination section of the Style pane, check the box for Multiple pages . Enter the number of items you want to appear on each page, and enter the number of the page you want the repeater to start on (defaults to 1 ). You can navigate the repeater's pages using the Set Current Page action, and you can dynamically change the number of items per page using the Set Items per Page action.

在 Style 窗格的 Pagination 部分，选中 多个页面 。输入您想要在每个页面上显示的项目的数量，并输入您想要中继器开始的页面的数量(默认为“1”)。您可以使用 Set Current Page 操作来导航中继器的页面，并且您可以使用 Set items per Page 操作来动态更改每个页面的项数。

2.2、Borders, Backgrounds, and Padding

边框、背景和填充

You can add borders and a background color to repeaters using the Fill , Border , and Corner options in the Style pane. Repeater borders and backgrounds render behind the widgets in the repeater's items, so you may need to add padding to the repeater in order to see them. The options in the Padding section of the Style pane allow you to create blank space between the repeater's outer edges and its items.

您可以使用 Style 窗格中的 Fill 、 Border 和 Corner 选项向重复器添加边框和背景颜色。中继器的边框和背景呈现在中继器项中的小部件后面，因此您可能需要向中继器添加填充以查看它们。 Style 窗格的 Padding 部分的选项允许您在中继器的外边缘和它的项之间创建空白空间。

Repeater items can also have their own background color that's different from the background of the repeater itself. You can select this color in the Item Back section of the Style pane. Additionally, you can check the box for Alternate Colors to select a second color that will be applied to every other item. This option is handy when building tables with the repeater widget.

中继器项目也可以有自己的背景颜色，不同于中继器本身的背景。您可以在 Style 窗格的 Item Back 部分中选择此颜色。此外，您可以选中“ 替换颜色 ”复选框，以选择将应用于所有其他项目的第二种颜色。这个选项在使用repeater小部件构建表时非常方便。

2.3、Fit to Content in HTML

适合内容在HTML

The Fit to Content in HTML checkbox is located just above the dataset in the Style pane and is enabled by default. With this option enabled, each repeater item will automatically resize to fit to its contained widgets.

HTML 复选框中的 Fit to Content位于 Style 窗格中的数据集上方，默认情况下是启用的。启用此选项后，每个repeater项将自动调整大小以适合其包含的小部件。

If you disable this option, each repeater item will remain at a fixed size, regardless of any changes to the size, position, or visibility of its contained widgets. Widgets moved or shown dynamically might overlap other repeater items if they extend outside the fixed boundaries of their own item.

如果禁用此选项，则每个repeater项将保持固定大小，而不管其包含的小部件的大小、位置或可见性发生任何更改。动态移动或显示的小部件如果超出其自身项的固定边界，则可能与其他中继器项重叠。

Note
提示

Fit to Content in HTML does not work with repeaters whose items are reloaded after the initial page load. This includes repeaters that are sorted or filtered as well as those whose rows are dynamically added, deleted, or updated in the web browser.
不适合HTML的内容 不工作的重复，其项目是重新加载后的初始页面加载。这包括排序或过滤的中继器，以及在web浏览器中动态添加、删除或更新行的中继器。

2.4、Isolate Radio Groups and Selection Groups

隔离单选按钮组和选择组

By default, radio groups and selection groups in the repeater item are evaluated separately for each instance of the item. For example, if the item has a radio group with three radio buttons in it, selecting one of the buttons will unselect the other two buttons in that instance of the item, but the other radio buttons in the other instances of the item will not be affected.

默认情况下，对repeater项中的每个实例分别计算无线电组和选择组。例如，如果项目有一个包含三个单选按钮的单选组，那么选择其中一个按钮将取消该项目实例中其他两个按钮的选择，但是项目的其他实例中的其他单选按钮将不受影响。

You can change this behavior by unchecking the boxes for Isolate Radio Groups and Isolate Selection Groups , located in the More Properties menu at the top-right of the Interactions pane. When these options are toggled off, radio groups and selection groups in the repeater item are evaluated across every instance of the item. Going back to our previous example, this would mean that selecting a radio button in the radio group in one instance of the item would unselect all other buttons in that radio group in every other instance of the item.

您可以通过取消** isolation Radio Groups 和 isolation Selection Groups 的复选框来更改此行为，它们位于 interaction **窗格右上角的More Properties菜单中。当这些选项被关闭时，在repeater项的每个实例中对无线电组和选择组进行评估。回到前面的示例，这意味着在项目的一个实例中选择单选组中的单选按钮将取消该项目的每个其他实例中该单选组中的所有其他按钮的选择。

2.5、The Repeater Mask

中继器蒙板

Repeaters are covered with a green mask by default to make their contained widgets easier to differentiate from others on the canvas. You can toggle the mask at View → Masks in the application menu.

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

Note
提示

Widget masks, including the repeater mask, are not applied in the web browser.
小部件掩码(包括中继器掩码)在web浏览器中不应用。

3、Special Interactions

特殊交互

3.1、Repeater-Specific Events

中继器特殊事件

3.1.1、Item Loaded

项加载

The Item Loaded event fires once for each instance of the repeater item that gets loaded in the web browser. For example, the event would fire three times for a repeater whose dataset contains three rows since each row creates a new instance of the item. Furthermore, the Item Loaded event always handles dataset rows in order from top to bottom.

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

A repeater loads all its items when the page first loads, and it reloads all its items whenever changes are made to the repeater's dataset. This means that the Item Loaded event fires once for every instance of the item at page load and every time dataset rows are added, deleted, or updated .

中继器在页面首次加载时加载其所有项，并且在对中继器的数据集进行更改时重新加载其所有项。这意味着 项加载事件在页面加载时为项的每个实例触发一次，每次数据集行被添加、删除或更新 。

3.1.2、Item Resized

项重设尺寸

The Item Resized event fires whenever an instance of the repeater item is resized due to changes to its contained widgets. This only happens when the repeater is set to Fit to Content.

每当repeater项的实例由于其包含的小部件的更改而调整大小时， 项大小调整 事件就会触发。只有当中继器被设置为适合内容时才会发生这种情况。

3.2、Sorting and Filtering Rows

排序和过滤行记录

3.2.1、Sorting

排序

Using the Add Sort and Remove Sort actions, you can dynamically sort a repeater's rows by any of its dataset columns. You can sort the column's values as any of the following data types:

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

• Number
  数字

• Text
  文本

• Text (Case Sensitive)
  文本(区分大小写)

• Date – YYYY-MM-DD
  日期– YYYY-MM-DD

• Date – MM/DD/YYYY
  日期 – MM/DD/YYYY

You can also choose to sort the rows in ascending or descending order, or you can toggle between the two whenever the sort is reapplied.

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

3.2.2、Filtering

过滤

Using the Add Filter and Remove Filter actions, you can dynamically filter a repeater to only display rows that meet certain criteria. You define these criteria with boolean expressions that compare one value, usually a dataset column or other repeater item property, to another. Some simple examples include the following:

使用 添加过滤器 和 删除过滤器 操作，您可以动态筛选一个中继器，只显示满足特定条件的行。您可以使用布尔表达式来定义这些条件，布尔表达式将一个值(通常是数据集列或其他repeater项属性)与另一个值进行比较。以下是一些简单的例子:

请到「今天看啥」查看全文