QML中树形控件TreeView的最基本、最简单粗暴的、一看秒懂的实现方法,之一

时间:2022-12-24 12:39:40

前言:

Qt Quick5.5alpha出来了,据说提供TreeView。于是这篇文章有大盘6k点入市的悲壮,注定是要做韭菜的。然而我们正在做的项目,还不能使用最新版Qt,本文的意义在于使用比较老版本的QML的项目。

正文:

用Qt很多年,最近才接触Qt Quick,不用不知道,一用果真不会用。C++和QML的语言使用的脑回路完全不一样。不过这种时候就不要追究这些细节了。TreeView是一个非常常用的界面控件,Qt Quick竟然多年以后总算提供,我们还是朋友,还可以问候。。。

因为本文的实现方法太简单粗暴了,不如直接看代码,Talk is cheap, show me the code!

运行环境

Qt5.1.1

IDE:Qt Creator

OS:Fedora

文件名:main.qml

QML源码


运行效果

QML中树形控件TreeView的最基本、最简单粗暴的、一看秒懂的实现方法,之一

对于学习TreeView来说就是这么恰到好处!增之一分则太长,减之一分则太短。这里用到了Qt的模型/代理/视图的知识,结构很清晰。

Qt的Model/View

说MVC容易理解的放学别走。

Qt的Model/View和MVC模式差不多,Model是数据,View是视图。重点在于, QtView是一个固定布局的容器,可能是列布局,可能是格子布局,自己脑补一个等分了很多小格的收纳盒。收纳盒里每一个单元格中的数据对应Model中的一份数据,每一份数据怎么显示则是“代理”来决定。比如Model是很多双袜子,堆在一起。View是这个收纳盒,伊每一个小格都装一双袜子。Delegate决定左袜子和右袜子(角色)怎么摆放进一个小格,所以Delegate控制每份数据的显示方式,是一个小模版。

源码解析

回到本文,实现TreeView两个难点:

1.数据模型支持树结构。

上面代码使用的JSON方式,也可以用QML方式,后续实现TreeView的文章会使用。Model有3个角色,name、level、subNode[]。name储存节点的名字,level控制缩进量,subNode[]是用来装子节点的。

2.代理的表达支持递归。

如果不考虑缩进的显示效果,可以把显示缩进的Item和Row元素去掉。objRecursiveDelegate代理中只有Text元素显示节点名字,还有一个Repeater递归显示子节点,这两个元素用Column装起来。最有技巧的就是这个Repeater。我们从头看。

第一步:View从Model中取到一个节点的数据,根据objRecursiveDelegate代理,首先把节点名字显示出来放在Column的第一行,Column的第二行是一个Repeater,数据来自subNode,代理还是这个objRecursiveDelegate代理。

第二步: 在column的第二行,按照objRecursiveDelegate代理描述,View取一个subNode节点的数据,节点名字放第一行。column的第二行重复第一步,只是数据变成subNode。

第三步:直到subNode为空,结束了这个节点数据,View从Model中取下一个节点数据。

可谓,天长地久有时尽,此方法显示无绝期。

TreeView进阶

言归正传,掌握核心力量,就可以做些酷炫的事。比如,

A)有子节点的父节点显示蓝色,无子节点的父节点显示绿色。

B)双击展开/收起子节点。

C)展开显示 – 号,收起显示 + 号。

下面是完整的代码,由上面的代码填充而来,是不是很简单呢! 

QML的TreeView进阶源码

【运行效果】

QML中树形控件TreeView的最基本、最简单粗暴的、一看秒懂的实现方法,之一QML中树形控件TreeView的最基本、最简单粗暴的、一看秒懂的实现方法,之一


致谢:

         本文提炼自这篇文章。(感谢这位大牛!)初学者的我们重要的是掌握核心!把大牛的文章作为进阶吧!