中繼器在Axure中可以作為圖片保存的數據庫，在實際系統中，我們經常需要將選擇數據庫的圖片添加到其他圖片列表中，所以今天就教大家，怎么在Axure中實現中繼器之間的圖片傳遞，包含將一個中繼器中的圖片列表傳遞到另一個中繼器列表，已經傳遞后怎么在圖片列表中刪除對應的圖片。

【原型效果】

1、點擊圖片列表的加號可以顯示圖片選擇器，選擇里面的圖片；

2、選擇圖片后點擊添加按鈕，可以將該圖片添加到圖片列表；

3、鼠標移入圖片列表的圖片，會顯示刪除按鈕，點擊可以刪除該圖片；

【原型預覽含下載地址】

https://axhub.im/ax9/ca3dd539f46dc856/#g=1&p=添加和刪除圖片

【制作教程】

1.材料準備

1.1主圖片列表

主圖片列表我們用中繼器來制作，在中繼器表格里放一張+號的圖片、矩形、刪除圖標，如下圖所示：

其中刪除按鈕和灰色透明矩形的組合默認隱藏、背景矩形需要增加鼠標移入和選中的樣式。

中繼器設置成網格顯示，水平布局，案例中每行展示4張圖片增加適當的行距和列距。

中繼器表格里需要增加兩列，no列暗順序123456填寫，pic列鼠標右鍵導入默認的圖片

1.2副圖片選擇列表

副圖片選擇列表組合主要有矩形、文字、中繼器圖片列表、圖標和按鈕組成，如下圖所示擺放

中繼器圖片列表和上面中繼器一樣，在中繼器里放置圖片元件和背景矩形，背景矩形需要增加鼠標移入和選中的交互樣式，其他布局和上面主圖片列表的中繼器一致

表里需要兩列，picture導入默認圖片，biaoji列為空，后續用于邏輯交互

如果圖片列表太多，超過了背景矩形的話，我們可以把中繼器轉為動態面板，調出滾動條并調整動態面板的尺寸。

整個組合轉為動態面板，后續可以根據需要固定在屏幕某個位置，或者實現拖動擺放的效果。

2.交互制作

2.1設置圖片

兩個中繼器里的圖片，我們都要設置到對應的圖片元件里，如果是Axure10或以上的版本，我們點擊中繼器表格里的連接按鈕，選擇對應的元件即可；如果是Axure9或以下的版本，我們就要寫交互來實現了，在中繼器每項加載時，我們用設置圖片的交互，將picture列的值設置到對應的圖片元件里即可。

2.2主圖片列表刪除圖片

鼠標移入圖片組合時，我們要先判斷，這個是已經導入了圖片的內容還是，+號圖片，如果pic列沒有內容，就是默認的加號圖片；如果有已導入的圖片，就用顯示的交互，顯示刪除按鈕和灰色透明矩形的組合，鼠標單擊刪除按鈕時，用刪除行的交互刪除當前行即可，鼠標移出圖片組合時，用隱藏的交互，隱藏刪除按鈕和灰色透明矩形的組合即可。

2.3主圖片列表添加圖片

我們先定義副圖片選擇列表的規則，如果biaoji列的值等于1，背景矩形就選中變色，這樣我們就可以知道哪個圖片被選擇了；如果biaoji列的值等于2，就要將這張圖片傳遞到主圖片列表里。

鼠標單擊+號圖片時，我們用顯示的交互把副圖片選擇列表的動態面板顯示出來

鼠標單擊副圖片選擇列表里的某張圖片時，我們要讓他選中變色，我們用更新行的交互，將當前行baioji列的值設置為1，這里我們還需要考慮到有沒有其他圖片選中，所以我們在更新之前，先把所有行的biaoji列的值先清空，這里我們可以用標記所有行，然后將所有行biaoji列的值設置為0，在更新當前行biaoji列的值等于1。

鼠標點擊添加按鈕時，我們用更新行的交互，將biaoji列里值等于1的行更新為2，這樣就可以將圖片傳遞到主圖片列表的中繼器里。因為我們想新添加的圖片出現在第一張，所以我們對no列先進行排序，按123456從小到大升序排列，所以我們在添加行的時候，no列的值填寫0，就是最小的，會自動出現在最前面。然后再用更新行的交互，將主圖片列表里no列的值在他原來的基礎上+1，相當于0的會變成1、1變成2……這樣后續添加的圖片都會出現在最前的位置。

2.4副圖片關閉時的交互

這里考慮到選中的圖片的背景會變色，所以在關閉的時候，要將他還原成透明，我們先標記所有行數據，然后用更新行的交互，將所有行biaoji列的值更新為0，最后用隱藏的交互，隱藏動態面板即可。

這樣我們就完成了中繼器間圖片的傳遞的原型模板了，后續使用也是很方便，默認的圖片內容只需要在中繼器里導入，即可自動生成的交互效果。

以上就是本期教程的全部內容，感謝您的閱讀，我們下期見。