最近在开发的一个qml界面里,使用了ListView显示超过200个Item,并且支持编辑。用户试用后反馈,从这么多项中找到要查看、编辑的Item很不方便,需要优化。
解决的方案有两个,排序和筛选。翻文档和网上资料,很多教程需要修改C++ model,比较繁琐。经过几番折腾,迂回实现了ListView的筛选显示,方法简单,效果也不错。分享一下。
最初的界面是下面这样的,其中有一列信息比较敏感,屏蔽了;右侧有些UI跟今天的主题无关,也P掉了。可见200多个项,滑动列表寻找确实不方便。
解决方案
第一步:首先增加一个TextArea,用于输入筛选文本,id设置为filterText。
第二部:然后在listview的delegate componet,比较item的内容和筛选文本,设置该component的visible属性。代码如下:
visible: model.name.indexOf(filterText.text) !== -1
这样,就实现了筛选效果,不符合条件的Item被隐藏了。
但是仅仅这样还不行。因为被过滤掉的项虽然隐藏了,但是还会占据位置,