Repeater(中繼器)控件的用法
Axure中的Repeater控件顧名思義就是可以重複添加內容,而無需逐個進行添加。該控件對於以九宮格類、列表類的形式內容時非常有效,且支援用戶添加、修改、刪除控件中的內容。
Repeater控件的使用步驟爲:
定義元素–>添加數據–>綁定數據–>修改樣式–>數據操作
下面以添加列表類內容爲例,逐步具體介紹該控件的使用方法。本文僅適用於具有一定Axure使用經驗的用戶閱讀。
1 定義Repeater元素
(01)在頁面中添加Repeater控件,添加後默認效果如下圖:
(02)雙擊編輯控件,並按下圖所示,爲Repeater添加內容,併爲各個組件命名:
(03)此時,返回到Home頁看到的效果如下(其中的數字1、2、3是默認值,暫時不用理會):
2 爲Repeater添加數據
(01)從上圖可以看到Repeater的框架已經顯示出來了,但裏面的內容還沒有,下面我們開始爲中繼器添加內容;開啟中繼器編輯介面,點擊頁面下部的小三角,開啟Repeater 屬性視窗,如下圖所示:其中,Repeater Dataset就是中繼器中的數據,這裏默認的1、2、3就是之前預覽介面中出現的數字。
(02)按照上一節對圖片、標籤的定義,爲中繼器添加列值(列值最好與之前的定義一致)和數據,添加之後效果如下:注意:由於頭像是圖片格式,但Axure並不支援輸入圖片路徑的方式,因此圖片需要在單元格中點擊右鍵選擇“匯入圖片”,只有這樣圖片才能正常顯示。
3 綁定數據
(01)Repeater的數據已經添加完成了,但你會發現此時在Home頁預覽Repeater仍然沒有顯示我們添加的數據,下面將介紹如果將我們添加的數據綁定到Repeater中。在Repeater屬性視窗中,點擊“中繼器項目交互”,顯示默認內容:
(02)修改ItemLoad用例的定義,修改參考下圖所示:注意:頭像要選擇“設定圖像”動作,其他內容選擇“設定文字”。這一步非常重要,如果設定不對,頭像將不顯示。
(03)此時,返回到Home頁預覽Repeater就可以看到上述步驟中添加的數據內容了:
4 修改樣式
(01)至此,Repeater中最重要的部分已經定義完成,當然還可以對Repeater的樣式進行簡單調整,定義非常簡單,請自行研究。下圖爲樣式定義,供參考:
(02)效果圖如下:
5 數據操作
(01)經過上述步驟,你已經可以定義一個完整的Repeater控件,透過這種方式可以節省大量樣式重複控件的添加工作。不過,這些只是Repeater基本的使用方法,其更大的價值在於可以動態添加、修改、刪除數據。下面的內容屬於Repeater進階用法,供有需要的讀者參考。當然,如果你的原型圖中並不需要動態增刪改數據的效果,那麼有之前的知識也夠用。
5.1 添加數據
(01)接上面的步驟,在Home頁放置一個按鈕,用於爲Repeater添加數據:
(02)爲該按鈕添加單擊效果,當點擊按鈕時爲Repeater添加一行數據,如下圖:注意:A. 這裏每次只能添加1行,如果定義了多行數據,則點擊按鈕時會一次性添加多行。B. 每次點擊按鈕時添加的行數據是相同的,如果想要添加不一樣的數據,則需要配合其他的方法,此處不做說明。
(03)預覽Home頁,每點擊1次“添加行”按鈕就可以在Repeater中添加1行:
5.2 修改數據
(01)開啟Repeater編輯介面,定義“修改”按鈕的點擊事件,實現點擊該按鈕修改該行description字段的功能,定義如下圖:
(02)預覽Home頁,點擊每行後面到“修改”按鈕即可以修改該行description字段的值:
5.3 刪除單行數據
(01)開啟Repeater編輯介面,定義“刪除”按鈕的點擊事件,實現點擊該按鈕刪除該行的功能,定義如下圖:
(02)預覽Home頁,點擊每行後面到“刪除”按鈕即可以刪除該行數據。
5.4 刪除多行數據
(01)如果需要選擇多行然後批量刪除,可以使用checkbox控件,並配合Mark Rows進行刪除,步驟如下。Repeater中行首增加一個checkbox控件,並定義該控件的狀態改變事件,實現當選中checkbox時標記該行,取消選中時取消標記該行,定義如下圖:
(02)在Home頁中增加“刪除選中行”按鈕,並定義該按鈕的點擊事件,實現點擊該按鈕可以刪除checkbox被選中的行,定義如下圖:
(03)預覽Home頁,點擊“刪除選中行”按鈕即可以刪除多行數據。
-
打印機驅動沒問題但就是無法打印問題的解決
有時我們使用打印機打印檔案時,發現好像一切都沒有問題,但就是按下打印鍵後打印機卻一直沒有反應。本篇就來介紹其中一種情況的解決方法。操作方法(01)在電腦的開始選單中找到“控制面板”點開。(02)在控制面板中有一項是“檢視設備和打印機”,單擊開啟。如圖。(03)在設...
-
該內存不能爲read或該內存不能爲written錯誤
有時候我們在使用電腦的時候,可能會彈出一個錯誤提示對話框,“0XXXXXXX”指令引用的“0x00000000”內存,該內存不能爲“read”或者written的錯誤出現此種錯誤的時候,點擊確定常常會關閉我們當前開啟的所有介面非常的不方便,小編今天就爲大家講解下出現這種情況的解...
-
PS CC 2017 安裝和破解 win10版
嘗試過很多個PS版本,還是覺得2017版的最好用,響應速度更快P圖更開心永久版你值得擁有!!操作方法(01)首先你要安裝PS2017軟件如果在網上找不到,可以聯繫小編哦。安裝時,按提示進行操作即可,需要一定的時間。(02)將下載下來的破解檔案解壓雙擊開啟紅框的程序(這個程序會自動...
-
360安全衛士桌面上的圖標不見了怎麼找回?
平時我們安裝一些常用的軟件的時候,在進行安裝的時候,大多數都會把它的快速啓動圖標建在桌面上,如果這些圖標由於電腦的原因或者是其它的原因在桌面上找不到它的啓動圖標的話,我們要透過什麼樣的方式才能找到它?操作方法(01)在我們安裝軟件的時候,它都會在桌面上和開始...