在Axure RP中,中繼器(Repeater)是一個功能強大的交互式元件,常用于動態展示和管理列表數據。本教程將通過一個清晰的案例,手把手教你如何使用中繼器實現列表數據的添加功能。
一、 理解中繼器
中繼器本質上是一個數據容器,你可以將它想象成一個簡易的數據庫表。它由兩部分組成:
- 中繼器數據集:存儲數據的表格,每一行代表一條數據,每一列代表一個字段。
- 中繼器項目:一個設計好的矩形組合,用于定義單條數據在頁面上如何呈現。項目中的元件(如文本框、圖片等)可以綁定到數據集的特定列,從而實現數據的動態加載。
二、 案例目標
我們將創建一個簡單的“待辦事項列表”。用戶可以在輸入框中輸入新事項,點擊“添加”按鈕,該事項就會動態添加到下方的列表中。
三、 分步實現
步驟1:搭建基礎界面
- 從元件庫中拖入一個中繼器到畫布上,并將其命名為
TodoRepeater。
- 在中繼器項目中,放置一個矩形(作為列表項背景)和一個文本標簽(用于顯示事項內容)。將文本標簽命名為
ItemText。
- 在中繼器外部,放置一個單行文本框(命名為
InputField)和一個按鈕(命名為 AddButton),用于輸入和添加新事項。
步驟2:配置中繼器數據集
- 雙擊中繼器,進入其編輯界面。
- 在數據集區域,默認有一列
Column0。我們將其重命名為 TodoItem(右鍵列名選擇“編輯列”)。
- 可以先添加幾行示例數據,例如:“學習Axure”、“完成原型設計”。
步驟3:綁定數據到項目樣式
- 在項目樣式中,選中文本標簽
ItemText。
- 在右側的“交互”面板中,找到“文本”屬性,點擊旁邊的“更多事件”圖標(或直接雙擊交互面板空白處)。
- 在彈出的交互事件編輯器中,選擇“設置文本”動作,目標元件選擇
ItemText。
- 在“設置文本為”的選項中,選擇“值”,然后點擊“fx”圖標。
- 在編輯文本的對話框中,插入變量或函數
[[Item.TodoItem]]。這表示將當前項目(Item)的 TodoItem 列的值顯示在這個文本標簽上。
- 點擊“確定”完成綁定。此時,畫布上的中繼器會立即顯示你在數據集中添加的示例數據。
步驟4:實現“添加”按鈕的交互邏輯
這是核心步驟,為 AddButton 按鈕添加“鼠標單擊時”的交互。
- 選中
AddButton 按鈕,在“交互”面板中點擊“新建交互”,選擇“鼠標單擊時”。
- 添加動作:添加行 -> 中繼器 -> 目標選擇
TodoRepeater。
- 在配置“添加行”動作時,我們需要指定新增行的數據。點擊“添加行”旁邊的“配置動作”圖標(或直接進入編輯)。
- 在“添加行到中繼器”的對話框中,點擊“添加行”按鈕。這會為新增的一行設置各列的值。
- 對于
TodoItem 列,我們需要將它的值設置為輸入框 InputField 中的內容。點擊該列值下的“fx”圖標。
- 在編輯值的對話框中,插入變量或函數
[[LVAR1]],然后在下方“局部變量”區域,點擊“添加局部變量”。
- 配置這個局部變量:
- 名稱:保持默認或自定義(如
InputText)。
- 這樣,表達式
[[LVAR1]] 就代表了輸入框的文本值。點擊“確定”完成值設置。
- (可選但推薦)在添加行動作之后,可以再添加一個“設置文本”動作,將
InputField 的文本清空,以提供更好的用戶體驗。
步驟5:預覽與測試
- 按
F5 鍵或點擊工具欄的“預覽”按鈕,在瀏覽器中打開原型。
- 在輸入框中輸入文字,例如“測試新事項”,然后點擊“添加”按鈕。
- 觀察下方的列表,新事項應該已經成功添加進去了。
四、 功能擴展與優化
- 數據驗證:可以在按鈕的交互邏輯前增加“條件”,檢查輸入框是否為空,如果為空則提示用戶。
- 刪除功能:可以在每個中繼器項目中添加一個“刪除”按鈕,為其添加“鼠標單擊時”交互,使用“刪除行”動作,目標選擇“This”(即當前項目所在的行)。
- 排序與篩選:利用中繼器自帶的“添加排序”和“添加篩選”交互,可以輕松實現按條件排序或篩選列表項。
五、 核心要點
- 數據存儲:在中繼器數據集中。
- 樣式定義:在中繼器項目中,通過綁定
[[Item.ColumnName]] 來動態顯示數據。
- 數據操作:通過“添加行”、“刪除行”、“更新行”等交互動作來修改數據集,中繼器的顯示會自動同步更新。
通過這個案例,你已經掌握了中繼器最核心的“增刪”操作。理解并熟練運用中繼器,將極大提升你制作高保真、可交互原型的效率與能力。
如若轉載,請注明出處:http://m.58gogo.cn/product/22.html
更新時間:2026-05-22 14:36:24