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

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

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

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

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

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

1. 準備工作

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

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

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

第二部分：配置中繼器（初始數據與樣式）

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

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

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

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

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

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

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

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

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

• 調整好布局（例如圖片在左，文字在右）。

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

第三部分：實現動態添加功能（核心交互）

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

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

2. 選擇觸發事件：
選擇“單擊時”。

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

動作一：添加行到中繼器

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

• 在右側的配置區域，選擇目標中繼器（我們之前創建的那個）。

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

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

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

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

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

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

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

• 點擊“確定”完成數據定義。

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

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

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

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

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

第四部分：測試與優化

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

1. 優化與擴展：

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

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

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

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

通過以上步驟，你已經成功在Axure RP中創建了一個可以自主添加圖文數據的中繼器。這個功能是構建動態內容管理系統、商品列表、評論列表等復雜原型的基礎。熟練掌握中繼器的操作，將極大提升你的高保真原型設計能力。