利用ivx的可滑動(dòng)容器制作消息列表的方法

最近在學(xué)習(xí)ivx的過(guò)程中，發(fā)現(xiàn)在拓展組件中有一個(gè)可滑動(dòng)容器組件。在制作一些案例的消息列表時(shí)，是經(jīng)常需要使用這種展示效果的，例如消息列表左滑即可選擇刪除或者置頂?shù)冉?jīng)常使用的功能，而平常按鈕又是隱藏起來(lái)的，不會(huì)擠占UI的展示區(qū)域非常便捷。ivx中將這個(gè)功能單獨(dú)封裝成一個(gè)功能組件，這里為ivx模塊細(xì)分工作點(diǎn)個(gè)贊！
1.添加可滑動(dòng)容器
在下圖位置中可以找到可滑動(dòng)容器，添加之后可以先看一下可滑動(dòng)容器的結(jié)構(gòu)，對(duì)象樹(shù)中除了會(huì)出現(xiàn)一個(gè)可滑動(dòng)容器，它的下面還會(huì)出現(xiàn)一個(gè)可滑動(dòng)按鈕組和一個(gè)可滑動(dòng)行。此時(shí)選中可滑動(dòng)容器再去點(diǎn)擊拓展組件，只能添加可滑動(dòng)按鈕組，而且鼠標(biāo)右鍵可滑動(dòng)按鈕組和可滑動(dòng)行你會(huì)發(fā)現(xiàn)，可滑動(dòng)按鈕組是可以刪除的，而可滑動(dòng)行是不行的，畢竟它是整個(gè)可滑動(dòng)容器的主要展示部分。

2.展示部分的主體-可滑動(dòng)行
在ivx這個(gè)demo里面，是選中可滑動(dòng)行添加了一個(gè)行容器，行容器中又添加三個(gè)列容器，分別展示頭像，昵稱消息內(nèi)容和消息日期。可滑動(dòng)行名字中是帶著行的，而且也確實(shí)可以把它當(dāng)成一個(gè)行組件看待。在內(nèi)部添加組件是橫向排列的，不過(guò)并不能像行組件一樣設(shè)置換行以及剪切，而且他的寬高也是由父容器可滑動(dòng)容器的寬高決定的。

3.滑動(dòng)后展示的區(qū)域-可滑動(dòng)按鈕組
可滑動(dòng)按鈕組也是采用行排列，我們?cè)诰庉嬈骼飳⒖苫瑒?dòng)行滑走就可以設(shè)置它里面的展示效果了，demo中是添加了三個(gè)按鈕組件，寬度不等，高度都是100%填滿可滑動(dòng)按鈕組。所以可滑動(dòng)按鈕組的寬度是由它里面的組件的總寬度決定的，而它的的高度自然是由可滑動(dòng)容器這個(gè)父容器決定了。

另外，選中它可以看到組件欄中很多組件都是可以添加的，不過(guò)常用的應(yīng)該還是按鈕，文字，圖片和圖標(biāo)這些。至于可滑動(dòng)按鈕組的屬性欄，則很簡(jiǎn)單只有一條容器中的位置。嗯，選左還是選右呢？Demo中是位于右側(cè)，改成左側(cè)當(dāng)然就變成向右滑了嘛。不滿足于此，我嘗試添加兩個(gè)按鈕組一個(gè)在左一個(gè)在右，然后我的可滑動(dòng)容器就成功解鎖左搖右晃。不過(guò)在左右任意滑之后我又將兩個(gè)可滑動(dòng)按鈕組都放在了一側(cè)，兩個(gè)按鈕組下的組件這回是重疊在了一起。好像有點(diǎn)皮，本來(lái)都在一側(cè)放在一個(gè)按鈕組里面不就好了嘛。不過(guò)再品品，細(xì)品，那我也可以做兩套滑動(dòng)按鈕組，然后在不同的場(chǎng)景下只顯示其中一個(gè)讓另一個(gè)隱藏起來(lái)嘛，那效果不是更精致了。還有，這個(gè)屬性是可以數(shù)據(jù)綁定的，而且只有左側(cè)右側(cè)兩個(gè)選項(xiàng)？不出所料，他的數(shù)據(jù)綁定是一個(gè)布爾值變量true or false。經(jīng)過(guò)驗(yàn)證，true is left ，false is right。

4.配合for容器循環(huán)創(chuàng)建完成消息列表
最后demo中的消息列表還配合了for容器的循環(huán)創(chuàng)建功能，畢竟一個(gè)消息列表會(huì)有很多消息，每一條都要對(duì)應(yīng)一個(gè)可滑動(dòng)容器，使用循環(huán)多創(chuàng)建幾個(gè)出來(lái)，一個(gè)消息列表的效果就算完成了。
5.總結(jié)
總結(jié)一下呢，可滑動(dòng)容器算是比較容易掌握的一個(gè)小組件，而且ivx中還有許多其他常用功能的拓展組件，以后的學(xué)習(xí)中要去多發(fā)現(xiàn)多嘗試。不能只想著最基本的方式方法，不然用基礎(chǔ)的行列按鈕要實(shí)現(xiàn)類(lèi)似的效果雖然也能做出來(lái)，但是無(wú)疑是會(huì)更復(fù)雜耗時(shí)的。