在Axure RP中，中繼器（Repeater）是一個(gè)功能強(qiáng)大且靈活的組件，它允許你動(dòng)態(tài)地展示和管理一組結(jié)構(gòu)化數(shù)據(jù)。通過(guò)學(xué)習(xí)如何操作中繼器，你可以制作出高度交互、數(shù)據(jù)驅(qū)動(dòng)的原型。本教程將詳細(xì)介紹如何實(shí)現(xiàn)“自主向中繼器添加圖文數(shù)據(jù)”這一核心功能，幫助你創(chuàng)建允許用戶(hù)動(dòng)態(tài)輸入并展示新條目的交互界面。

第一部分：理解核心概念與準(zhǔn)備工作

1. 中繼器是什么？
中繼器就像一個(gè)可重復(fù)的數(shù)據(jù)表格或列表容器。它由兩部分組成：

• 數(shù)據(jù)集：一個(gè)表格，用于存儲(chǔ)和管理數(shù)據(jù)（例如，每行可以存儲(chǔ)一個(gè)項(xiàng)目的標(biāo)題、圖片、描述）。

• 項(xiàng)樣式：一個(gè)設(shè)計(jì)好的視覺(jué)模板，定義了數(shù)據(jù)集中的每一行數(shù)據(jù)應(yīng)該如何顯示在界面上。

2. 本教程目標(biāo)
我們將創(chuàng)建一個(gè)簡(jiǎn)單的“圖文列表”原型。初始狀態(tài)，中繼器顯示幾條預(yù)設(shè)的圖文數(shù)據(jù)。用戶(hù)可以在下方的輸入框中填寫(xiě)新標(biāo)題、上傳（或選擇模擬）新圖片，點(diǎn)擊“添加”按鈕后，新的圖文條目會(huì)立即出現(xiàn)在列表中。

1. 準(zhǔn)備工作

• 打開(kāi)Axure RP，新建一個(gè)頁(yè)面。

• 從左側(cè)元件庫(kù)中，拖入一個(gè)“中繼器”元件到畫(huà)布上。

• 再拖入必要的輸入元件：兩個(gè)“單行文本框”（分別用于輸入標(biāo)題和描述）、一個(gè)“圖片”元件（作為圖片上傳的占位符或選擇器）、一個(gè)“按鈕”元件（作為添加按鈕）。

第二部分：配置中繼器（初始數(shù)據(jù)與樣式）

1. 設(shè)置中繼器數(shù)據(jù)集：
選中畫(huà)布上的中繼器，在右側(cè)的“檢視窗”中找到“中繼器”面板。你會(huì)看到一個(gè)默認(rèn)的表格。我們至少需要三列來(lái)存儲(chǔ)數(shù)據(jù)：

• title (文本類(lèi)型)： 存儲(chǔ)條目標(biāo)題。

• image (文本類(lèi)型)： 存儲(chǔ)圖片的鏈接或標(biāo)識(shí)符（例如圖片文件名）。你可以預(yù)先準(zhǔn)備幾張圖片放到項(xiàng)目資源中。

• description (文本類(lèi)型)： 存儲(chǔ)條目描述。

• （可選）id (數(shù)字類(lèi)型)： 作為唯一標(biāo)識(shí)。

2. 添加初始數(shù)據(jù)：
在表格中手動(dòng)輸入幾行數(shù)據(jù)。對(duì)于image列，可以填入你已添加到項(xiàng)目資源的圖片名稱(chēng)，如 pic1.png。

3. 設(shè)計(jì)中繼器項(xiàng)樣式：
雙擊畫(huà)布上的中繼器，進(jìn)入項(xiàng)樣式編輯界面。你會(huì)看到一個(gè)默認(rèn)的矩形。在這個(gè)矩形內(nèi)，你需要設(shè)計(jì)單個(gè)數(shù)據(jù)項(xiàng)的展示樣式。

• 拖入一個(gè)“圖片”元件，用于展示image列的數(shù)據(jù)。選中這個(gè)圖片元件，在右側(cè)“檢視窗”的“屬性”頁(yè)，點(diǎn)擊“圖片”下拉菜單，選擇“值”。在彈出的對(duì)話(huà)框中，選擇“中繼器/數(shù)據(jù)集”下的image列。

• 拖入兩個(gè)“文本標(biāo)簽”元件，分別用于展示title和description列的數(shù)據(jù)。同樣地，選中每個(gè)文本標(biāo)簽，在“文本”屬性中選擇“值”，并綁定對(duì)應(yīng)的列。

• 調(diào)整好布局（例如圖片在左，文字在右）。

4. 預(yù)覽初始效果：
按F5預(yù)覽原型，此時(shí)中繼器應(yīng)該能正常顯示你預(yù)設(shè)的幾條圖文數(shù)據(jù)。

第三部分：實(shí)現(xiàn)動(dòng)態(tài)添加功能（核心交互）

這是最關(guān)鍵的一步，我們將為“添加”按鈕設(shè)置交互，使其能夠獲取輸入框的內(nèi)容，并更新到中繼器的數(shù)據(jù)集中。

1. 為“添加”按鈕添加交互事件：
選中“添加”按鈕，在右側(cè)“檢視窗”的“屬性”頁(yè)，點(diǎn)擊“新建交互”。

2. 選擇觸發(fā)事件：
選擇“單擊時(shí)”。

3. 添加動(dòng)作：
在彈出的交互編輯器中，我們需要按順序添加兩個(gè)動(dòng)作：

動(dòng)作一：添加行到中繼器

• 在“添加動(dòng)作”列表中，找到“中繼器” -> “添加行”。

• 在右側(cè)的配置區(qū)域，選擇目標(biāo)中繼器（我們之前創(chuàng)建的那個(gè)）。

• 點(diǎn)擊“添加行”下方的“添加...”按鈕，來(lái)定義要添加的數(shù)據(jù)。

• 在彈出的對(duì)話(huà)框中，我們需要為每一列設(shè)置“值”。

• 對(duì)于 title 列：點(diǎn)擊“fx”圖標(biāo)，在打開(kāi)的編輯器中，選擇“元件文字” -> 你用于輸入標(biāo)題的那個(gè)“單行文本框”元件。這會(huì)將文本框內(nèi)的文字作為新行的title值。

• 對(duì)于 description 列：用同樣的方法，綁定到描述輸入框。

• 對(duì)于 image 列：這里有兩種常見(jiàn)做法：

• 固定圖片：如果你只是模擬，可以直接輸入一個(gè)已有的圖片名，如 new.png。

• 動(dòng)態(tài)選擇：你可以做一個(gè)圖片選擇器（例如幾個(gè)帶不同圖片的按鈕），在點(diǎn)擊時(shí)設(shè)置一個(gè)全局變量記錄選中的圖片名。然后在這里的 image 列值中，引用那個(gè)全局變量。

• 點(diǎn)擊“確定”完成數(shù)據(jù)定義。

動(dòng)作二：清空輸入框（提升用戶(hù)體驗(yàn)）

• 繼續(xù)在同一個(gè)交互中，“添加動(dòng)作” -> “設(shè)置文本”。

• 目標(biāo)選擇你用于輸入標(biāo)題的“單行文本框”。

• 在“設(shè)置文本為”選項(xiàng)中，選擇“值”，并留空。

• 重復(fù)此步驟，清空描述輸入框的文本。

第四部分：測(cè)試與優(yōu)化

1. 預(yù)覽與測(cè)試：
再次按F5預(yù)覽原型。在標(biāo)題和描述輸入框中輸入內(nèi)容，點(diǎn)擊“添加”按鈕。觀察中繼器列表底部是否成功添加了一條新的圖文數(shù)據(jù)。

1. 優(yōu)化與擴(kuò)展：

• 數(shù)據(jù)驗(yàn)證：可以在按鈕的“單擊時(shí)”交互最前面，添加“情形”來(lái)判斷輸入框是否為空，如果為空則顯示提示。

• 圖片上傳模擬：要模擬真實(shí)的圖片上傳，可以設(shè)計(jì)一個(gè)交互：點(diǎn)擊圖片占位符時(shí)，打開(kāi)一個(gè)包含多個(gè)圖片選項(xiàng)的彈窗，選擇后，將選中的圖片設(shè)置為占位符的顯示圖片，并同時(shí)將一個(gè)代表該圖片的標(biāo)識(shí)符（如圖片名）存入一個(gè)全局變量，供“添加行”動(dòng)作調(diào)用。

• 刪除功能：可以在中繼器的項(xiàng)樣式中為每個(gè)條目添加一個(gè)“刪除”按鈕，并為該按鈕設(shè)置交互：“單擊時(shí)” -> “中繼器” -> “刪除行”，目標(biāo)選擇“當(dāng)前行”。

• 排序與篩選：利用中繼器自帶的排序和篩選功能，可以輕松實(shí)現(xiàn)按條件顯示數(shù)據(jù)。

通過(guò)以上步驟，你已經(jīng)成功在Axure RP中創(chuàng)建了一個(gè)可以自主添加圖文數(shù)據(jù)的中繼器。這個(gè)功能是構(gòu)建動(dòng)態(tài)內(nèi)容管理系統(tǒng)、商品列表、評(píng)論列表等復(fù)雜原型的基礎(chǔ)。熟練掌握中繼器的操作，將極大提升你的高保真原型設(shè)計(jì)能力。