利用ivx的可滑动容器制作消息列表的方法
更新:HHH   时间:2023-1-7


最近在学习ivx的过程中,发现在拓展组件中有一个可滑动容器组件。在制作一些案例的消息列表时,是经常需要使用这种展示效果的,例如消息列表左滑即可选择删除或者置顶等经常使用的功能,而平常按钮又是隐藏起来的,不会挤占UI的展示区域非常便捷。ivx中将这个功能单独封装成一个功能组件,这里为ivx模块细分工作点个赞!
1.添加可滑动容器
在下图位置中可以找到可滑动容器,添加之后可以先看一下可滑动容器的结构,对象树中除了会出现一个可滑动容器,它的下面还会出现一个可滑动按钮组和一个可滑动行。此时选中可滑动容器再去点击拓展组件,只能添加可滑动按钮组,而且鼠标右键可滑动按钮组和可滑动行你会发现,可滑动按钮组是可以删除的,而可滑动行是不行的,毕竟它是整个可滑动容器的主要展示部分。

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

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

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

4.配合for容器循环创建完成消息列表
最后demo中的消息列表还配合了for容器的循环创建功能,毕竟一个消息列表会有很多消息,每一条都要对应一个可滑动容器,使用循环多创建几个出来,一个消息列表的效果就算完成了。
5.总结
总结一下呢,可滑动容器算是比较容易掌握的一个小组件,而且ivx中还有许多其他常用功能的拓展组件,以后的学习中要去多发现多尝试。不能只想着最基本的方式方法,不然用基础的行列按钮要实现类似的效果虽然也能做出来,但是无疑是会更复杂耗时的。

返回web开发教程...