中繼器(Repeater)是Axure 9.0中一個功能強大且高效的交互組件,它允許你通過數(shù)據(jù)集動態(tài)生成和管理重復的內(nèi)容項,并實現(xiàn)復雜的交互邏輯,尤其適合模擬列表、表格、卡片等數(shù)據(jù)的增、刪、改、查操作。對于零基礎用戶,掌握中繼器是邁向高保真原型設計的關鍵一步。
一、理解中繼器的核心構成
在開始操作前,需要明確中繼器的兩個核心部分:
- 數(shù)據(jù)集(Data Set):一個類似表格的結構,用于存儲數(shù)據(jù)。每一行代表一個數(shù)據(jù)項,每一列代表一個屬性(如姓名、年齡、狀態(tài))。
- 項目(Item):即中繼器內(nèi)部的矩形、文本標簽等元件組合,它定義了每個數(shù)據(jù)項應如何顯示。你需要將項目內(nèi)的元件與數(shù)據(jù)集的列進行“綁定”,數(shù)據(jù)才能正確顯示。
二、基礎設置:創(chuàng)建與顯示數(shù)據(jù)
- 拖放中繼器:從元件庫中拖出一個“中繼器”到畫布上。
- 編輯數(shù)據(jù)集:雙擊中繼器,進入其內(nèi)部編輯界面。點擊右上角的“數(shù)據(jù)集”表格,可以手動添加行(數(shù)據(jù)項)和列(屬性),并填入示例數(shù)據(jù)。
- 綁定數(shù)據(jù)到項目:在項目內(nèi),選中一個文本標簽,在右側的“交互”面板中找到“設置文本”的用例。添加動作,選擇這個文本標簽,將“文本值”設置為“值”,然后在下拉菜單中選擇對應的數(shù)據(jù)集列(例如
[[Item.Column0]])。這樣,中繼器每生成一行,就會用對應行的數(shù)據(jù)填充這個標簽。
- 預覽效果:關閉內(nèi)部編輯界面,在畫布上選中中繼器,在右側“樣式”面板中,你可以看到它已經(jīng)根據(jù)數(shù)據(jù)集的行數(shù)自動生成了多個項目(即多條數(shù)據(jù))。
三、核心操作:增、刪、改、查的實現(xiàn)
以下操作均需通過“交互”面板添加用例和動作來完成。
1. 增(Add)
目標:通過一個表單(輸入框、按鈕等)向中繼器添加新數(shù)據(jù)行。
- 步驟:
- 在畫布上放置輸入框(如用于輸入姓名)和一個“添加”按鈕。
- 在配置中,選擇目標中繼器,然后點擊“添加行”鏈接,在彈出的窗口中,將每一列的值設置為對應輸入框的元件文字(例如
[[LVAR1.text]],需先設置局部變量LVAR1指向姓名輸入框)。
2. 刪(Delete)
目標:點擊每條數(shù)據(jù)旁的“刪除”按鈕,移除該行數(shù)據(jù)。
- 步驟:
- 在中繼器的“項目”內(nèi)部,放置一個“刪除”按鈕(這個小按鈕會隨著每一行數(shù)據(jù)重復出現(xiàn))。
- 在配置中,選擇“當前行”(This)。這樣,點擊哪一行的按鈕,就會刪除對應的數(shù)據(jù)行。
3. 改(Edit / Update)
目標:點擊“編輯”按鈕,將行數(shù)據(jù)載入表單修改后保存更新。
- 步驟:
- 設置標記行:在項目內(nèi)部的“編輯”按鈕上,添加“單擊時”用例。添加動作:“中繼器” -> “標記行”,選擇“當前行”。這步是為了記住我們要編輯哪一行。
- 載入數(shù)據(jù)到表單:在同一個用例中,添加多個“設置文本”動作,將表單輸入框的文本設置為被標記行的對應列值(例如
[[Item.Column0]])。
- 更新數(shù)據(jù):在畫布上的“保存”按鈕上,添加“單擊時”用例。添加動作:“中繼器” -> “更新行”。
- 在配置中,選擇目標中繼器,選擇“已標記”的行,然后將每一列的新值設置為表單輸入框的當前內(nèi)容。
4. 查(Filter / Sort)
目標:根據(jù)關鍵詞篩選,或按某一列排序顯示數(shù)據(jù)。
- 篩選(Filter):
- 放置一個搜索輸入框和“搜索”按鈕。
- 為“搜索”按鈕添加“單擊時”用例。添加動作:“中繼器” -> “添加篩選”。
- 在規(guī)則中,設置條件,例如
[[Item.Column0.indexOf(LVAR1.text)>=0]](判斷Column0是否包含輸入的關鍵詞)。
- 要顯示全部,可以添加一個“全部”按鈕,其動作為“移除篩選”。
- 為按鈕添加“單擊時”用例。添加動作:“中繼器” -> “添加排序”。
四、學習建議與
- 從模仿開始:先嚴格按照步驟操作,理解每個動作的指向(是對中繼器本身操作,還是對其內(nèi)部項目操作)。
- 善用預覽:每完成一個步驟都按F5預覽,觀察交互效果,這是調(diào)試和理解的最佳方式。
- 理解數(shù)據(jù)流向:始終清楚數(shù)據(jù)是存儲在數(shù)據(jù)集中,通過項目顯示,并通過交互動作進行增刪改查。
- 組合應用:將增刪改查組合起來,就能模擬出完整的后臺數(shù)據(jù)管理界面原型。
通過以上步驟,即便是零基礎用戶,也能在Axure 9.0中利用中繼器構建出動態(tài)、交互性強的數(shù)據(jù)驅動界面原型,極大地提升原型的設計能力和真實感。
如若轉載,請注明出處:http://m.58gogo.cn/product/23.html
更新時間:2026-05-22 20:59:59