4.3 中继器元件

中继器元件与动态面板元件一样经常被用于实现复杂的交互功能。中继器操作相对复杂，创建后需要编辑内部每一组数据项的内部布局，可设置包括多少数据列（一般与内部布局的可设置的动态元素个数对应），也可设置中继器包括的数据行的内容；并可通过每项载入时事件，将数据行的内容赋值给每一组数据项内部的元件，还可设置每行显示多少组数据项。

当然，中继器的强大之处还在于，在各事件中，可设置中继器的动作（添加排序、移除排序、添加筛选、移除筛选、设置当前显示数量、设置每页项目数量、设置数据集，例如添加行、标记行、取消标记、更新行和删除行）对中继器进行内部操作。因为这些强大的功能，中继器元件完全可以替代表格元件实现更复杂的操作。

1.创建中继器元件

从“元件库”面板拖动一个中继器元件到“页面设计”面板，并在“样式”面板将该元件命名为productRepeater，如图4-9所示。

2.编辑中继器元件内部内容

双击创建的productRepeater中继器元件，可进入中继器元件的内部设计界面，默认其内部有一个矩形元件，可以自行创建内容。可以从“元件库”面板拖动1个矩形元件、1 个图片元件、1 个文本框元件到中继器内部界面，并分别命名为：rect1、dressImg和nameLabel，3 个元件的位置分别为：X0；Y0、X0；Y1 和X10；Y304，3 个元件的大小分别为：W228；H342、W226；H293 和W164:H20（注：W表示宽度，单位为像素，H表示高度，单位也是像素，本书后续表示元件大小时，皆为这种表示方式）。编辑完成后，中继器内部如图4-10所示。

3.设置中继器元件数据行和数据列

切换回主页面，选择productRepeater中继器，在“样式”面板可看到中继器元件数据行和数据列的设置页面，如图4-11所示。

因为productRepeater中继器内部有两个需要动态复制的元件，1个图片元件（商品图片）和1个文本框元件（商品名称），所以，给这个中继器设置两列，分别为productImg和productName。准备6张图书图片作为商品图片，尺寸为宽度226像素，高度为293像素。

将第一列productImg所有行的文字内容清空，之后单击第一行的第一列的单元格后，右击选择“导入图片”命令，选择已经准备好的图片“商品图片1”，之后选择第一行第二列的productName，设置该行的商品名称为“快速阅读术”。其余数据行和数据列的内容设置完成后，中继器元件数据行和数据列的界面如图4-12所示。

4.设置中继器的每项加载时事件

为了让设置的6行2列的数据作用于productRepeater中继器元件，需要设置“每项加载时”事件。在主页面选中productRepeater中继器元件，之后在“交互”面板设置“每项加载时”事件（事件内容后续章节会有详细讲解），将数据项的内容赋值给中继器内部的dressImg和nameLabel元件，如图4-13所示。此时，在“页面设计”面板可看到显示效果，如图4-14所示。

5.设置中继器元件显示效果

中继器元件默认是每一行都分行显示，如果想设置为每行3 个商品，此时，可以选中中继器元件，在“样式”面板设置“布局”属性为“水平”，勾选“网格排布”，并设置“每排项目数”为3，设置完成后，使用菜单栏的“发布”→“预览”命令，或者按〈F5〉快捷键查看预览效果，如图4-15所示。