养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Qml之ListView控件位置定位的几个方法

时间:2024-09-21 08:11:28

笔者在开发产品过程中,ListView算是用的最多的控件之缬方焱蜱一了。ListView控件有两大醐肛们亲要素比较重要,一是model数据,二是delegate实例。用得好这两个基本上对这一控件没什么问题了,一开始笔者也是这样想的,可是学习不同于产品的开发,客户总是有这样那样的要求要去实现。你却有不能不去做,客户经常对这产品说,这个功能不好,要这样。本文就是介绍ListView控件个性化位置设置,对于一般的控件设置它的位置是非常简单的事,设置x,y轴坐标就可以了。但是客户也不是那么容易就被解决好的。本文介绍几种方法来设置ListView控件的位置,总有一种适合你

Qml之ListView控件位置定位的几个方法

工具/原料

linux或windows系统

qt4.8版本以上

方法/步骤

1、1.下图就是一个ListView控件的实例,该控件mod娣定撰钠el值设置为10,意味有10个delega墉掠载牿te实例,就是绿色程序框0到10的计算值。问题来了,界面只显示到第4个实例,我想要看第5个实例。怎么办呢?最简单直接的方法就是操作你的鼠标或滑动你的鼠标滚轮就可以移动到相应的实例项了。这个不纳入设置位置的方法,实在太简单了。客户说:当我点击第0个实例要显示到第5个实例的位置显示一些信息?客户又说:当我点击任意地方回到第0个实例或最后的实例,意思就是说回到首页或者跳到页尾?客户突然有新想法:这里有个需求就是,点击任意地方跳到指定位置?本文就是解决三个问题的三个对应方法,解决这想法多的客户。

Qml之ListView控件位置定位的几个方法

2、2.第一种方法就是使用ListView的currentIndex参数,这一参数大多数以“...View”后缀的都可以使用,该参数。该参数可读可写,当currentIndex设置到指定的值是,则实例会被移动到当前项,看下两图的对比可以看出,当点击第0个实例时触发点击事件currentIndex设置为5,移动到了可视的范围。这里有一点需要注意的是,当currentIndex为上一值时不能被重复触发。

Qml之ListView控件位置定位的几个方法

Qml之ListView控件位置定位的几个方法

3、3.第二种方法是使用positionViewAtIndex猾诮沓靥(intindex,model)函数,该函数的第一个参素是index的对应项,如果要跳到最后的实例,那么in颊俄岿髭dex应该是10-1,而model则是跳到指定的位置,这里位置设置参数主要有这几个ListView.Beginning、ListView.Center、ListView.End。这里选择填入的参数是positionViewAtIndex(9,ListView.End)跳到最后。如果想要跳到首页则这样设置positionViewAtIndex(0,ListView.Beginning)。

Qml之ListView控件位置定位的几个方法

4、4.最后一种方法是使用ContentY或ContentX的值,这两个值与x,y的值不一样,它们是相对坐标。看下他们怎么用吧。本例子没有用到ContentX,ContentX主要用于水品移动的,而ContentY主要用于垂直移动。下图是点击ListView任意地方实例跳到第10个。可以看出只有一项了,以为其他的项被推到最顶层了。因为每一个实例100的高度,所以设置ContentY=900即可达到这样的效果。

Qml之ListView控件位置定位的几个方法

5、5.方法之对比有缺点:这三种方法各有优缺点,使用根据需要使用。方法一优点:速度快,缺点是不能重复触发;方法二优点:灵活性高,缺点是使用复杂;方法三优点:共有方法一二的功能,缺点就是操作不方便。具体怎么使用呢?如果该ListView需要频繁设置位置则使用CurrentIndex;如果该ListView需要指定位置则使用positionViewAtIndex;如果该ListView需要指定具体位置使用ContentY,笔者推荐使用方法三。

Qml之ListView控件位置定位的几个方法

6、6.一些文件与源代码仅供学习参考。这些文件都是在Qt项目工程生成,只需参考图片main.qml即可。

Qml之ListView控件位置定位的几个方法

© 一点知识