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

第一部分：理解核心概念與準備工作

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

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

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

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

1. 準備工作

• 打開Axure RP，新建一個頁面。

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

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

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

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

• title (文本類型)： 存儲條目標題。

• image (文本類型)： 存儲圖片的鏈接或標識符（例如圖片文件名）。你可以預(yù)先準備幾張圖片放到項目資源中。

• description (文本類型)： 存儲條目描述。

• （可選）id (數(shù)字類型)： 作為唯一標識。

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

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

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

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

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

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

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

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

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

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

3. 添加動作：
在彈出的交互編輯器中，我們需要按順序添加兩個動作：

動作一：添加行到中繼器

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

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

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

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

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

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

• 對于 image 列：這里有兩種常見做法：

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

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

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

動作二：清空輸入框（提升用戶體驗）

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

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

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

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

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

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

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

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

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

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

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

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