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

2025-11-10 22:41:25

1、       1. 下图就是一个ListView控件的实例, 该控件model值设置为10,意味有10个delegate实例,就是绿色程序框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(int index, model)函数,该函数的第一个参素是index的对应项,如果要跳到最后的实例,那么index应该是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控件位置定位的几个方法

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢