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

时间：2020-03-10 23:39:58 阅读：153 评论：0 收藏：0 [点我收藏+]

最近在学习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中还有许多其他常用功能的拓展组件，以后的学习中要去多发现多尝试。不能只想着最基本的方式方法，不然用基础的行列按钮要实现类似的效果虽然也能做出来，但是无疑是会更复杂耗时的。

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

标签：滑动按钮结构基本选择删除鼠标显示绑定按钮组 png

原文地址：https://blog.51cto.com/14556317/2477008

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行