中繼器（Repeater）是Axure 9.0中一個(gè)功能強(qiáng)大且高效的交互組件，它允許你通過(guò)數(shù)據(jù)集動(dòng)態(tài)生成和管理重復(fù)的內(nèi)容項(xiàng)，并實(shí)現(xiàn)復(fù)雜的交互邏輯，尤其適合模擬列表、表格、卡片等數(shù)據(jù)的增、刪、改、查操作。對(duì)于零基礎(chǔ)用戶，掌握中繼器是邁向高保真原型設(shè)計(jì)的關(guān)鍵一步。

一、理解中繼器的核心構(gòu)成

在開始操作前，需要明確中繼器的兩個(gè)核心部分：

1. 數(shù)據(jù)集（Data Set）：一個(gè)類似表格的結(jié)構(gòu)，用于存儲(chǔ)數(shù)據(jù)。每一行代表一個(gè)數(shù)據(jù)項(xiàng)，每一列代表一個(gè)屬性（如姓名、年齡、狀態(tài)）。
2. 項(xiàng)目（Item）：即中繼器內(nèi)部的矩形、文本標(biāo)簽等元件組合，它定義了每個(gè)數(shù)據(jù)項(xiàng)應(yīng)如何顯示。你需要將項(xiàng)目?jī)?nèi)的元件與數(shù)據(jù)集的列進(jìn)行“綁定”，數(shù)據(jù)才能正確顯示。

二、基礎(chǔ)設(shè)置：創(chuàng)建與顯示數(shù)據(jù)

1. 拖放中繼器：從元件庫(kù)中拖出一個(gè)“中繼器”到畫布上。
2. 編輯數(shù)據(jù)集：雙擊中繼器，進(jìn)入其內(nèi)部編輯界面。點(diǎn)擊右上角的“數(shù)據(jù)集”表格，可以手動(dòng)添加行（數(shù)據(jù)項(xiàng)）和列（屬性），并填入示例數(shù)據(jù)。
3. 綁定數(shù)據(jù)到項(xiàng)目：在項(xiàng)目?jī)?nèi)，選中一個(gè)文本標(biāo)簽，在右側(cè)的“交互”面板中找到“設(shè)置文本”的用例。添加動(dòng)作，選擇這個(gè)文本標(biāo)簽，將“文本值”設(shè)置為“值”，然后在下拉菜單中選擇對(duì)應(yīng)的數(shù)據(jù)集列（例如 [[Item.Column0]]）。這樣，中繼器每生成一行，就會(huì)用對(duì)應(yīng)行的數(shù)據(jù)填充這個(gè)標(biāo)簽。
4. 預(yù)覽效果：關(guān)閉內(nèi)部編輯界面，在畫布上選中中繼器，在右側(cè)“樣式”面板中，你可以看到它已經(jīng)根據(jù)數(shù)據(jù)集的行數(shù)自動(dòng)生成了多個(gè)項(xiàng)目（即多條數(shù)據(jù)）。

三、核心操作：增、刪、改、查的實(shí)現(xiàn)

以下操作均需通過(guò)“交互”面板添加用例和動(dòng)作來(lái)完成。

1. 增（Add）

目標(biāo)：通過(guò)一個(gè)表單（輸入框、按鈕等）向中繼器添加新數(shù)據(jù)行。

• 步驟：
• 在畫布上放置輸入框（如用于輸入姓名）和一個(gè)“添加”按鈕。

• 為“添加”按鈕添加“單擊時(shí)”的交互用例。

• 添加動(dòng)作：“中繼器” -> “添加行”。

• 在配置中，選擇目標(biāo)中繼器，然后點(diǎn)擊“添加行”鏈接，在彈出的窗口中，將每一列的值設(shè)置為對(duì)應(yīng)輸入框的元件文字（例如 [[LVAR1.text]]，需先設(shè)置局部變量LVAR1指向姓名輸入框）。

• （可選）添加動(dòng)作清空輸入框。

2. 刪（Delete）

目標(biāo)：點(diǎn)擊每條數(shù)據(jù)旁的“刪除”按鈕，移除該行數(shù)據(jù)。

• 步驟：
• 在中繼器的“項(xiàng)目”內(nèi)部，放置一個(gè)“刪除”按鈕（這個(gè)小按鈕會(huì)隨著每一行數(shù)據(jù)重復(fù)出現(xiàn)）。

• 為這個(gè)“刪除”按鈕添加“單擊時(shí)”交互用例。

• 添加動(dòng)作：“中繼器” -> “刪除行”。

• 在配置中，選擇“當(dāng)前行”（This）。這樣，點(diǎn)擊哪一行的按鈕，就會(huì)刪除對(duì)應(yīng)的數(shù)據(jù)行。

3. 改（Edit / Update）

目標(biāo)：點(diǎn)擊“編輯”按鈕，將行數(shù)據(jù)載入表單修改后保存更新。

• 步驟：
• 設(shè)置標(biāo)記行：在項(xiàng)目?jī)?nèi)部的“編輯”按鈕上，添加“單擊時(shí)”用例。添加動(dòng)作：“中繼器” -> “標(biāo)記行”，選擇“當(dāng)前行”。這步是為了記住我們要編輯哪一行。

• 載入數(shù)據(jù)到表單：在同一個(gè)用例中，添加多個(gè)“設(shè)置文本”動(dòng)作，將表單輸入框的文本設(shè)置為被標(biāo)記行的對(duì)應(yīng)列值（例如 [[Item.Column0]]）。

• 更新數(shù)據(jù)：在畫布上的“保存”按鈕上，添加“單擊時(shí)”用例。添加動(dòng)作：“中繼器” -> “更新行”。

• 在配置中，選擇目標(biāo)中繼器，選擇“已標(biāo)記”的行，然后將每一列的新值設(shè)置為表單輸入框的當(dāng)前內(nèi)容。

4. 查（Filter / Sort）

目標(biāo)：根據(jù)關(guān)鍵詞篩選，或按某一列排序顯示數(shù)據(jù)。

• 篩選（Filter）：
• 放置一個(gè)搜索輸入框和“搜索”按鈕。

• 為“搜索”按鈕添加“單擊時(shí)”用例。添加動(dòng)作：“中繼器” -> “添加篩選”。

• 在規(guī)則中，設(shè)置條件，例如 [[Item.Column0.indexOf(LVAR1.text)>=0]]（判斷Column0是否包含輸入的關(guān)鍵詞）。

• 要顯示全部，可以添加一個(gè)“全部”按鈕，其動(dòng)作為“移除篩選”。

• 排序（Sort）：
• 放置“升序/降序”按鈕。

• 為按鈕添加“單擊時(shí)”用例。添加動(dòng)作：“中繼器” -> “添加排序”。

• 選擇要排序的列，并指定升序或降序。

四、學(xué)習(xí)建議與

• 從模仿開始：先嚴(yán)格按照步驟操作，理解每個(gè)動(dòng)作的指向（是對(duì)中繼器本身操作，還是對(duì)其內(nèi)部項(xiàng)目操作）。
• 善用預(yù)覽：每完成一個(gè)步驟都按F5預(yù)覽，觀察交互效果，這是調(diào)試和理解的最佳方式。
• 理解數(shù)據(jù)流向：始終清楚數(shù)據(jù)是存儲(chǔ)在數(shù)據(jù)集中，通過(guò)項(xiàng)目顯示，并通過(guò)交互動(dòng)作進(jìn)行增刪改查。
• 組合應(yīng)用：將增刪改查組合起來(lái)，就能模擬出完整的后臺(tái)數(shù)據(jù)管理界面原型。

通過(guò)以上步驟，即便是零基礎(chǔ)用戶，也能在Axure 9.0中利用中繼器構(gòu)建出動(dòng)態(tài)、交互性強(qiáng)的數(shù)據(jù)驅(qū)動(dòng)界面原型，極大地提升原型的設(shè)計(jì)能力和真實(shí)感。