使用ivx的可滑动容器制作消息列表的一些经验总结

最近在学习ivx的过程中，发现在拓展组件中有一个可滑动容器组件。在制作一些案例的消息列表时，是经常需要使用这种展示效果的，例如消息列表左滑即可选择删除或者置顶等经常使用的功能，而平常按钮又是隐藏起来的，不会挤占UI的展示区域非常便捷。ivx中将这个功能单独封装成一个功能组件，这里为ivx模块细分工作点个赞！这里也把我对这个功能模块的使用心得写下来 希望能对大家有所帮助。

1.添加可滑动容器

在下图位置中可以找到可滑动容器，添加之后可以先看一下可滑动容器的结构，对象树中除了会出现一个可滑动容器，它的下面还会出现一个可滑动按钮组和一个可滑动行。此时选中可滑动容器再去点击拓展组件，只能添加可滑动按钮组，而且鼠标右键可滑动按钮组和可滑动行你会发现，可滑动按钮组是可以删除的，而可滑动行是不行的，毕竟它是整个可滑动容器的主要展示部分。

2.展示部分的主体-可滑动行

在ivx这个demo里面，是选中可滑动行添加了一个行容器，行容器中又添加三个列容器，分别展示头像，昵称消息内容和消息日期。可滑动行名字中是带着行的，而且也确实可以把它当成一个行组件看待。在内部添加组件是横向排列的，不过并不能像行组件一样设置换行以及剪切，而且他的宽高也是由父容器可滑动容器的宽高决定的。

3.滑动后展示的区域-可滑动按钮组

可滑动按钮组也是采用行排列，我们在编辑器里将可滑动行滑走就可以设置它里面的展示效果了，demo中是添加了三个按钮组件，宽度不等，高度都是100%填满可滑动按钮组。所以可滑动按钮组的宽度是由它里面的组件的总宽度决定的，而它的的高度自然是由可滑动容器这个父容器决定了。

另外，选中它可以看到组件栏中很多组件都是可以添加的，不过常用的应该还是按钮，文字，图片和图标这些。至于可滑动按钮组的属性栏，则很简单只有一条容器中的位置。嗯，选左还是选右呢？Demo中是位于右侧，改成左侧当然就变成向右滑了嘛。不满足于此，我尝试添加两个按钮组一个在左一个在右，然后我的可滑动容器就成功解锁左摇右晃。不过在左右任意滑之后我又将两个可滑动按钮组都放在了一侧，两个按钮组下的组件这回是重叠在了一起。好像有点皮，本来都在一侧放在一个按钮组里面不就好了嘛。不过再品品，细品，那我也可以做两套滑动按钮组，然后在不同的场景下只显示其中一个让另一个隐藏起来嘛，那效果不是更精致了。还有，这个属性是可以数据绑定的，而且只有左侧右侧两个选项？不出所料，他的数据绑定是一个布尔值变量true or false。经过验证，true is left ，false is right。（False is right 感觉好像读了个冷笑话呢，这是设计师留的彩蛋么）

4.配合for容器循环创建完成消息列表

最后demo中的消息列表还配合了for容器的循环创建功能，毕竟一个消息列表会有很多消息，每一条都要对应一个可滑动容器，使用循环多创建几个出来，一个消息列表的效果就算完成了。

5.总结

总结一下呢，可滑动容器算是比较容易掌握的一个小组件，而且ivx中还有许多其他常用功能的拓展组件，以后的学习中要去多发现多尝试。不能只想着最基本的方式方法，不然用基础的行列按钮要实现类似的效果虽然也能做出来，但是无疑是会更复杂耗时的。