在Axure RP中，中繼器（Repeater）是一個功能強大的交互式元件，常用于動態展示和管理列表數據。本教程將通過一個清晰的案例，手把手教你如何使用中繼器實現列表數據的添加功能。

一、 理解中繼器

中繼器本質上是一個數據容器，你可以將它想象成一個簡易的數據庫表。它由兩部分組成：

1. 中繼器數據集：存儲數據的表格，每一行代表一條數據，每一列代表一個字段。
2. 中繼器項目：一個設計好的矩形組合，用于定義單條數據在頁面上如何呈現。項目中的元件（如文本框、圖片等）可以綁定到數據集的特定列，從而實現數據的動態加載。

二、 案例目標

我們將創建一個簡單的“待辦事項列表”。用戶可以在輸入框中輸入新事項，點擊“添加”按鈕，該事項就會動態添加到下方的列表中。

三、 分步實現

步驟1：搭建基礎界面

1. 從元件庫中拖入一個中繼器到畫布上，并將其命名為 TodoRepeater。
2. 在中繼器項目中，放置一個矩形（作為列表項背景）和一個文本標簽（用于顯示事項內容）。將文本標簽命名為 ItemText。
3. 在中繼器外部，放置一個單行文本框（命名為 InputField）和一個按鈕（命名為 AddButton），用于輸入和添加新事項。

步驟2：配置中繼器數據集

1. 雙擊中繼器，進入其編輯界面。
2. 在數據集區域，默認有一列 Column0。我們將其重命名為 TodoItem（右鍵列名選擇“編輯列”）。
3. 可以先添加幾行示例數據，例如：“學習Axure”、“完成原型設計”。

步驟3：綁定數據到項目樣式

1. 在項目樣式中，選中文本標簽 ItemText。
2. 在右側的“交互”面板中，找到“文本”屬性，點擊旁邊的“更多事件”圖標（或直接雙擊交互面板空白處）。
3. 在彈出的交互事件編輯器中，選擇“設置文本”動作，目標元件選擇 ItemText。
4. 在“設置文本為”的選項中，選擇“值”，然后點擊“fx”圖標。
5. 在編輯文本的對話框中，插入變量或函數 [[Item.TodoItem]]。這表示將當前項目（Item）的 TodoItem 列的值顯示在這個文本標簽上。
6. 點擊“確定”完成綁定。此時，畫布上的中繼器會立即顯示你在數據集中添加的示例數據。

步驟4：實現“添加”按鈕的交互邏輯

這是核心步驟，為 AddButton 按鈕添加“鼠標單擊時”的交互。

1. 選中 AddButton 按鈕，在“交互”面板中點擊“新建交互”，選擇“鼠標單擊時”。
2. 添加動作：添加行 -> 中繼器 -> 目標選擇 TodoRepeater。
3. 在配置“添加行”動作時，我們需要指定新增行的數據。點擊“添加行”旁邊的“配置動作”圖標（或直接進入編輯）。
4. 在“添加行到中繼器”的對話框中，點擊“添加行”按鈕。這會為新增的一行設置各列的值。
5. 對于 TodoItem 列，我們需要將它的值設置為輸入框 InputField 中的內容。點擊該列值下的“fx”圖標。
6. 在編輯值的對話框中，插入變量或函數 [[LVAR1]]，然后在下方“局部變量”區域，點擊“添加局部變量”。
7. 配置這個局部變量：

• 名稱：保持默認或自定義（如 InputText）。

• 組件：選擇 InputField。

• 屬性：選擇“文本”。

1. 這樣，表達式 [[LVAR1]] 就代表了輸入框的文本值。點擊“確定”完成值設置。
2. （可選但推薦）在添加行動作之后，可以再添加一個“設置文本”動作，將 InputField 的文本清空，以提供更好的用戶體驗。

步驟5：預覽與測試

1. 按 F5 鍵或點擊工具欄的“預覽”按鈕，在瀏覽器中打開原型。
2. 在輸入框中輸入文字，例如“測試新事項”，然后點擊“添加”按鈕。
3. 觀察下方的列表，新事項應該已經成功添加進去了。

四、 功能擴展與優化

• 數據驗證：可以在按鈕的交互邏輯前增加“條件”，檢查輸入框是否為空，如果為空則提示用戶。
• 刪除功能：可以在每個中繼器項目中添加一個“刪除”按鈕，為其添加“鼠標單擊時”交互，使用“刪除行”動作，目標選擇“This”（即當前項目所在的行）。
• 排序與篩選：利用中繼器自帶的“添加排序”和“添加篩選”交互，可以輕松實現按條件排序或篩選列表項。

五、 核心要點

• 數據存儲：在中繼器數據集中。
• 樣式定義：在中繼器項目中，通過綁定 [[Item.ColumnName]] 來動態顯示數據。
• 數據操作：通過“添加行”、“刪除行”、“更新行”等交互動作來修改數據集，中繼器的顯示會自動同步更新。

通過這個案例，你已經掌握了中繼器最核心的“增刪”操作。理解并熟練運用中繼器，將極大提升你制作高保真、可交互原型的效率與能力。